论坛首页 Web前端技术论坛

分享ckEditor3.5.3添加上传图片功能的定制版(注:非ckFinder,非showModalDialog方式,附完全可运行的例子)

浏览 5326 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-05-06   最后修改:2011-05-06

FCKEditor改为ckEditor已经有好些年啦,以前用的是FCK,但FCK集成到Java需要在页面上添加自定义标签,然后调用,比较麻烦,虽然ckEditor也有Java的集成版本,但我并不打算使用,我还是倾向于使用纯JavaScript启动的ckEditor版本。


ckEditor不提供图片上传功能是一直被骂的大问题,提供了个什么ckFinder插件也不怎么好用,唉,没办法,谁叫人家的东西强大,要用只能自己定制啦(在看CkEditor的代码时发现它有写上传部分的代码,就是不知道怎么用,所以还是自己写吧)。


网上关于定制CK上传功能的文章,全部都是扯淡,要不就说个大概,要不帖几句不能运行的代码出来,忽悠一下你,又不提供可下载的例子让人家看看效果,都不知道是不是成功的经验!!!

不过,从这些文章中,我也多多少少受到一些启发,哈哈!!


http://docs.cksource.com/ckeditor_api/index.html,为了定制CK,我可是把API研究得够彻底啊,三天时间的研究,总算模糊地明白CK的工作方式,哈哈。


现在来说一下我对CK的一些修改,具体的代码在附件里提供,这个例子完全可运行,包括上传功能!


首先就是编辑器的功能组件啦,我根据需要,删除了一些不必要使用的组件,并对组件重新排版,效果如下:

www.kaixinhk.com

在字体选择框里,添加了几个中文的字体。


图片上传功能组件里,点击后会马上弹出上传层让用户选择本地图片路径:


www.kaixinhk.com

用户也可以关闭上传新图片窗口,在"图片路径"里输入网络图片地址,效果跟原来的ck一样。


上传成功后,我会手动触发"图象属性"层底部的"确定"按钮,把图片添加到编辑器里,并关闭该窗口:

www.kaixinhk.com

当然,这个是静态例子,返回的代码在例子的uploadDo.html里,也就是无论你选择上传什么图片,都会获得同样的效果,就是我的网站的logo啦,哈哈

在实际使用时,uploadDo.html里所写的代码会被替换成真正的效果,以下是uploadDo.html的示例代码:

www.kaixinhk.com

上面提到的callbackCKUpload代码如下:

www.kaixinhk.com


好,效果就演示到这里啦,在这里介绍一下 cKEditor 文件夹里的那个 ckeditor.pack 文件。

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/CKPackager
这个文章里讲到,可以生成自己定制的 ckEditor,把一些不必要的组件删除。
我的定制版中,删除了一些编辑器功能,编辑器语言使用中文,皮肤使用v2,将这些体现到 ckeditor.pack 里,再生成 ckeditor.js 文件,命令如下:
java -jar ckpackager.jar ckeditor.pack (ckpackager.jar 放在 ckEditor 根目录下, ckpackager.jar就自己去下载啦)



至些,定制过程就结束了,我也把我三天多的努力成果,给我们的后台管理同事使用,哈哈



不过才用了几个小时,大家就发现很多问题,具体如下:

1、使用回车换行时,两段落之间的间距很大,这个体现在IE浏览器下,这个问题貌似可以解决,但我已经不想再解决!
2、当图片在内容的最后面里,不能在图片后面换行,也就是不能在图片下面添加新内容。
3、从外站copy过来的内容需要清除几次格式才能成功,并且有些段落是选中不了,要选中多行才能把该段落选中并修改。
4、在各封装版浏览器,如TT, 360都有些显示问题,在TT里甚至显示不了设置字体大小的下拉列表,IE8却是没问题的。这些烂东西都是基于IE内核了,为何IE可以,它却出问题,他妈的,严重鄙视这些垃圾产品!

5、图片上传在全屏编辑时会有Bug,上传窗口显示不出来,所以我取消了全屏功能的按钮。


最后,只能忍痛将我奋斗三天的成果独自欣赏啦。

当然,这些问题应该也是可以解决的,但难度之大也是必然的,如果有朋友有好的办法或建议,请分享!



注:附件中提供的例子图片上传功能在Chrome下运行有些问题,不过只要替换成实际的效果,问题就不存在了!

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics