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

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


[size=small;]

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


[size=small;]
[/size]


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


[size=small;]不过，从这些文章中，我也多多少少受到一些启发，哈哈！！[/size]


[size=small;]
[/size]


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


[size=small;]
[/size]


[size=small;]现在来说一下我对CK的一些修改，具体的代码在附件里提供，这个例子完全可运行，包括上传功能！[/size]


[size=small;]
[/size]


[size=small;]首先就是编辑器的功能组件啦，我根据需要，删除了一些不必要使用的组件，并对组件重新排版，效果如下：[/size]


[size=small;][img]http://www.xn--b0t733db8c.com/imgs/3666042749.jpg" alt="www.kaixinhk.com" width="759" height="265[/img][/size]


[size=small;]在字体选择框里，添加了几个中文的字体。[/size]


[size=small;]

图片上传功能组件里，点击后会马上弹出上传层让用户选择本地图片路径：[/size]


[size=small;]
[/size]


[size=small;][img]http://www.xn--b0t733db8c.com/imgs/301703609.jpg" alt="www.kaixinhk.com" width="761" height="244[/img][/size]


[size=small;]用户也可以关闭上传新图片窗口，在"图片路径"里输入网络图片地址，效果跟原来的ck一样。[/size]


[size=small;]
[/size]


[size=small;]上传成功后，我会手动触发"图象属性"层底部的"确定"按钮，把图片添加到编辑器里，并关闭该窗口：[/size]


[size=small;][img]http://www.xn--b0t733db8c.com/imgs/4196696500.jpg" alt="www.kaixinhk.com" width="763" height="305[/img][/size]


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


[size=small;]在实际使用时，uploadDo.html里所写的代码会被替换成真正的效果，以下是uploadDo.html的示例代码：[/size]


[size=small;][img]http://www.xn--b0t733db8c.com/imgs/2628897159.jpg" alt="www.kaixinhk.com" width="887" height="294[/img][/size]


[size=small;]上面提到的callbackCKUpload代码如下：[/size]


[size=small;][img]http://www.xn--b0t733db8c.com/imgs/4178113147.jpg" alt="www.kaixinhk.com" width="1095" height="428[/img][/size]


[size=small;]
[/size]


[size=small;]好，效果就演示到这里啦，在这里介绍一下 cKEditor 文件夹里的那个 ckeditor.pack 文件。[/size]


[size=small;]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就自己去下载啦)[/size]


[size=small;]
[/size]


[size=small;]
[/size]


[size=small;]至些，定制过程就结束了，我也把我三天多的努力成果，给我们的后台管理同事使用，哈哈[/size]


[size=small;]
[/size]


[size=small;]

不过才用了几个小时，大家就发现很多问题，具体如下：[/size]


[size=small;]1、使用回车换行时，两段落之间的间距很大，这个体现在IE浏览器下，这个问题貌似可以解决，但我已经不想再解决！

2、当图片在内容的最后面里，不能在图片后面换行，也就是不能在图片下面添加新内容。

3、从外站copy过来的内容需要清除几次格式才能成功，并且有些段落是选中不了，要选中多行才能把该段落选中并修改。

4、在各封装版浏览器，如TT, 360都有些显示问题，在TT里甚至显示不了设置字体大小的下拉列表，IE8却是没问题的。这些烂东西都是基于IE内核了，为何IE可以，它却出问题，他妈的，严重鄙视这些垃圾产品！[/size]


[size=small;]5、图片上传在全屏编辑时会有Bug，上传窗口显示不出来，所以我取消了全屏功能的按钮。[/size]


[size=small;]
[/size]


[size=small;]最后，只能忍痛将我奋斗三天的成果独自欣赏啦。[/size]


[size=small;]当然，这些问题应该也是可以解决的，但难度之大也是必然的，如果有朋友有好的办法或建议，请分享！[/size]


[size=small;]
[/size]


[size=small;]
[/size]


[size=small;]注：附件中提供的例子图片上传功能在Chrome下运行有些问题，不过只要替换成实际的效果，问题就不存在了！[/size]

评论

1 楼 181054867 2012-05-26  

打算重新编辑一下，结果页面乱了，垃圾到不行的编辑器，看被别人转的这篇吧：http://www.xn--b0t733db8c.com/Web%E5%89%8D%E7%AB%AF/11989709834.html