CKEditor4.6.2 图片/Flash上传及预览附件上传

最近做富文本编辑器，最后选用了 CKeditor，个人更喜欢这个编辑器的风格。本文将不再阐述CKeditor的基础配置，比较的简单，网上例子不少，官方的demo也有。

好，直接进入正题：

1.图片上传

网上有较多的关于CKeditor图片上传的例子，也有CKeditor + CKFinder的例子。我只使用了CKeditor来实现。

上图是我修改之后的图片上传界面，首先找到 ckeditor/plugins/image/dialog/image.js

{
id: "Upload",
hidden: 0,
filebrowser: "uploadButton",
label: d.lang.image.upload,
elements: [{
type: "file",
id: "upload",
//label: d.lang.image.btnUpload,
style: "height:40px",
size: 38
},
{
type: "fileButton",
id: "uploadButton",
filebrowser: "info:txtUrl",
label: d.lang.image.btnUpload,
"for": ["Upload", "upload"]
}]
},

修改hidden:0. 这样上传的功能就出来了. 还有两个功能被我隐藏掉了，不去深究。

选择文件以后，点击上传到服务器调用的URL是什么呢？

这个需要在 config.js里面进行配置：

config.filebrowserImageUploadUrl = getProjectPath() + "/editor/uploadImage";

这里配置的就是后台处理上传图片的URL，我使用的是jfinal.

后台处理完图片以后，最后需要使用流输出：

callFunction方法中的三个参数分别为：

第一个参数：CKEditorFuncNum ckeditor上传默认带入的参数直接通过request.getParameter("CKEditorFuncNum")；获取就可以啦。

第二个参数：URL 图片地址URL

第三个参数：错误信息假如上传出错或者是在后台判断图片大小等功能，设置这个值，就可以在上传界面弹提示该信息。成功上传传空值即可。

CKeditor接受到这个信息，如果URL有值，那么会直接跳到预览的界面了。

这个功能比较的简单。好，看一下最终的效果图。

点击确定按钮，图片就会插入到编辑器的光标处了。双击编辑器中的图片又会弹出图像信息这个页面，可以手动的设置一下宽度高度，还挺方便。

这个功能比较简单，就介绍到这里了。

2.Flash上传 (支持flv的Flash上传)

Flash的上传和图片上传对比起来差不多。好，让我们开始吧。

首先来看一下我的Flash上传功能的图片。

首先，和图片上传一样，先找到 ckeditor/plugins/flash/dialog/flash.js 找到那段代码开启上传的功能。（参考上面图片上传的示例代码）

然后就是配置config.js了：

config.filebrowserFlashUploadUrl = getProjectPath() + "/editor/uploadFlash";

这里配置的就是处理Flash上传的后台URL了。不再多做解释，继续往下：

处理文件的代码我就不贴了，相信大家都能自己搞定。最主要的是不是我们上传成功以后，需要ckeditor的响应呢？还需要预览给用户看啊。

那么这里呢，和图片上传就不太一样了。请注意了，这里不仔细看，可能会让你的Flash上传预览失败或者因为找不到视频浏览器崩溃哦。

好，先来看一下，我的Flash上传的plugin目录：

唯一多出来的就是 flvplayer.swf 播放视频的时候就需要借助到它了。网上下载一个即可。

好，继续说如何在后台让ckeditor响应，还是使用流输出还是那个方法那段代码熟悉的味道哈哈。

第一个参数和第三个参数和图片上传一致，不做解释，需要了解的朋友请看上面.

关键在于第二个参数，需要改动一下：

"ckeditor/plugins/flash/flvplayer.swf?vcastr_file=/" + 项目名 + "视频存放路径/视频名";

这样，ckeditor就能接收到后台传递的信息了。就可以预览视频了。

网上有个哥们也提到说可以在flash.js里面加入这段代码，

就是我注释掉的部分。经我测试，是有问题的，大家慎用。用我的方法，没毛病。嘿嘿。

不能光说不练啊，直接上效果图：

大家可以看到URL，带有我们刚才说的那段代码，比较重要啊，这里。希望大家能注意。

这里呢，点击确定就能把视频插入到编辑器里面了。再附两张效果图：

这样，你的Flash就加入到编辑器里面了。点击预览按钮，也不会有问题了。基本上大功告成了。

如果有朋友有需要我介绍关于附件的上传可以评论留言。先给大家上一张附件上传的效果图吧。

功能实现起来其实比较的简单啦，这个功能，我使用了 uploadify来做，因为我需要兼容到IE8.

本来想自己模仿着ckeditor的插件来做一个弹窗的，但是对API不熟，无奈，下面的这个弹窗是我自己做的。

如果大家有更好的建议或者做法，欢迎大家交流。

好叻，时间关系，这篇文章先到此为止了，有点晚了。希望能对大家有点帮助吧。最主要还是让自己加深一下印象，也留下篇文档。

CKEditor4.6.2 图片/Flash上传及预览附件上传相关推荐

php 文件预览水印,PHP图片上传，预览图上传，水印设置
//设置图片的存放目录设置水印的存放地址如果愿意,可以给预览图.上传图片分设不同的存储地址 $img_path = $_SERVER['DOCUMENT_ROOT']."/data/img ...
html选择文件夹控件,File文件控件，选中文件(图片,flash,视频)即立即预览显示
我们平常用file文件控件上传文件,要预览有时会刷新页面,结果file控件被清空,好多人问能能让他不清空或重新赋值,因为处于安全性的考虑,这是不可能的.那怎么进行无刷新预览呢?这里我把我所使用的方法写 ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
技术干货 | “选图预览并上传”的场景如何解？全网最全方案汇总来了
简介: 你真的知道如何"上传"一张照片吗? 选择本地相册图片或者拍照,然后预览并且上传是移动应用中一个典型的使用场景,比如常见的身份证信息上传等. 不少客户都反馈有类似的场景,并且 ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...

CKEditor4.6.2 图片/Flash上传及预览附件上传

CKEditor4.6.2 图片/Flash上传及预览附件上传相关推荐

最新文章

热门文章

CKEditor4.6.2 图片/Flash上传及预览 附件上传

CKEditor4.6.2 图片/Flash上传及预览 附件上传相关推荐

最新文章

热门文章

CKEditor4.6.2 图片/Flash上传及预览附件上传

CKEditor4.6.2 图片/Flash上传及预览附件上传相关推荐