最近做富文本编辑器,最后选用了 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.
后台处理完图片以后,最后需要使用流输出:
<script type=\"text/JavaScript\">window.parent.CKEDITOR.tools.callFunction('' , '' ,'');</script>
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响应,还是使用流输出 还是那个方法 那段代码 熟悉的味道 哈哈。
<script type=\"text/JavaScript\">window.parent.CKEDITOR.tools.callFunction('' , '' ,'');</script>
第一个参数 和 第三个参数 和图片上传一致,不做解释,需要了解的朋友请看上面.
关键在于第二个参数,需要改动一下:
"ckeditor/plugins/flash/flvplayer.swf?vcastr_file=/" + 项目名 + "视频存放路径/视频名";
这样,ckeditor就能接收到后台传递的信息了。就可以预览视频了。
网上有个哥们也提到说可以在flash.js里面加入这段代码,
就是我注释掉的部分。经我测试,是有问题的,大家慎用。用我的方法,没毛病。 嘿嘿。
不能光说不练啊,直接上效果图:
大家可以看到URL,带有我们刚才说的那段代码,比较重要啊,这里。希望大家能注意。
这里呢,点击确定 就能把视频插入到编辑器里面了。 再附两张效果图:
这样,你的Flash就加入到编辑器里面了。点击 预览按钮,也不会有问题了。基本上大功告成了。
如果有朋友有需要 我介绍 关于 附件的上传 可以评论 留言。 先给大家上一张附件上传的效果图吧。
功能实现起来其实比较的简单啦,这个功能,我使用了 uploadify来做,因为我需要兼容到IE8.
本来想自己模仿着ckeditor的插件来做一个弹窗的,但是对API不熟,无奈,下面的这个弹窗是我自己做的。
如果大家有更好的建议或者做法,欢迎大家交流。
好叻,时间关系,这篇文章先到此为止了,有点晚了。 希望能对大家有点帮助吧。最主要还是让自己加深一下印象,也留下篇文档。