[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]
分享到:
相关推荐
FCKEditor作为一款强大的页面编辑器已经被CKEditor取代,但是新版的CKEditor不再支持图片和文件的上传功能,需要依赖CKFinder来实现。CKEditor for Java 最新版本是3.5.3,CKFinder的最新版本是2.0.2,特做一个整合...
在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容: CKEDITOR.editorConfig = function( config ) { config.scayt_...
ckeditor_java_3.5.3和ckfinder_java_2.0.2配置程序案例。有一个简单的配置案例供大家参考,主要是将这两个工具结合。
网上流传的ckeditor和ckfinder基本是都是不能上传图片的 这个版本包含了本人将近一个星期的汗水,绝对支持上传 1、CKFinder.dll在ckfinder的bin/debug中使用不要忘记引用 2、ckeditor中config.js使用时不要忘记...
第一步:网站需要引用CKFinder的dll(目录:/CKFinder/bin/Release/CKFinder....配置完成后CKEditor 就带有上传功能了,但假如上传图片时,图片的文件是用原来图片的名字,想改为随机文件名呢,怎么办?接着看第三步。
ckeditor+ckfinder精简版 ckeditor+ckfinder精简版 ckeditor+ckfinder精简版
JAVA工程项目整合ckeditor+ckfinder实现图片上传、文件上传功能。
ckeditor+ckfinder配置实现图片上传实例: 版本ckeditor4.0.1+ckfinder2.3.1,已经去掉授权提示, 需要的可以下下来研究下。
FCKEditor插件(自动排版)移植至CKEditor.K:\ckeditor\ckeditor_3.5.3\ckeditor\_samples下\自动排版.html页面
ckeditor与ckfinder(java版)整合详细流程 实现了图片的上传功能
1,根据CKEditor4源文件整合; 2,集成了图片上传功能,详见upload.ashx; 3,集成了文件上传功能,并已将文件按【年月】文件夹分类...4,提供了文件上传功能的官方源文件,可自行更改文件命名方式,并生成CKFinder.dll
ckeditor+ckfinder 完美组合编辑器 加图片上传功能 里面有demo演示页面。
CKEditor,Ckfinder上传图片详解及部分示例源码,很全,很详细,
ckeditor3.5.3最新版本,本人在官网下的。欢迎大家下载
CKEditor3.4+CKFinder 2.0.1+asp 最终破解版 ------By: XingDream 1:破解ckfinder,除去了浏览服务器资源页面上的测试demo的字样,注册提示,并做了适当的精简 2:支持image,flash,链接的上传 删除 等 3:修复了...
ckeditor_3.5.3ckeditor_3.5.3ckeditor_3.5.3ckeditor_3.5.3ckeditor_3.5.3ckeditor_3.5.3
ckeditor + ckFinder asp utf版,可用
自己总结的一个ckeditor+ckfinder例子,可以富文本编辑,可以上传图片文件,修改了jar包中的源码,长传的文件自动重名。
强大的富文本编辑器 完整项目,下载就能运行,java版本的 ckeditor + ckfinder 可以上传图片 文件
最新ckeditor_ckfinder整合超完整版 for PHP版让你的文本编辑器支持图片和FLASH的上传 附ckeditor完整中文配置