新版CKeditor七牛云插件修改基于,CKeditor 4.6的源码,CKeditor新版支持从word复制内容直接上传了(IE9+),所以不需要之前的imagepaste老插件了。本来打算对上传的文件名做一个修改,避免同时拖入大量文件,导致文件名相同覆盖的情况,考虑到之前使用的是:Uinx时间戳_原文件名的方式,所以默认还是不修改。很多人觉得文件名对搜索引擎排名有提权作用,其实可以说是基本没有的,所以不用纠结文件名的问题。
新版的改动
1、升级到CKeditor 4.6源码,并且保留了CKeditor的原来功能。
2、压缩了文件,主要针对使用http的友好了一些。
3、优化了下配置方式,之前需要输入很多的环境参数,现在只需要在config.js里配置就可以了。
4、配合JQuery lazylaod插件做了一些图片加载优化配置,还需要后台配合。
5、修复了一个Bug,之前可能一些浏览器有上传成功,但是获取图片地址是失败的情况,现在修复了。
环境初始化和配置
1.初始化之前需要服务器输出上传的uptoken (或者在config.js里配置config.qiniuUptokenUrl),当然像下面这样直接输出一个uptoken优先级高。
1 2 3 |
|
2.在config.js里配置。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 |
|
输出七牛云uptoken和配置好参数之后,引入七牛云qiniu.min.js和plupload.full.js之后,就可以加载编辑器了。
1 2 3 |
|
相对CKeditor 4.6官方源码,修改的地方
1.config.js (把大部分配置加入到了这里)
2.plugin/dialog/plugin.js (解决图片对话框Tab的disabled激活问题,暂时先这样用着)
3.plugin/image/dialog/image.js (图片对话框上传,之前是copy了一份修改,新版融入到原来的js文件里了,解决一个小bug)
4.plugin/filetools/plugin.js (拖拽上传、黏贴上传处理相关)
5.plugin/filebrowser/plugin.js (对话框上传图片地址返回处理)
6.plugin/uplodimage/plugin.js (拖拽上传、黏贴上传处理)
因为是压缩优化过的,所以就不贴具体代码了。如果真有人需要没压缩版本,自己修改的话,我再把源码贴到网盘。
图片的lazyload问题
考虑到有些图片质量比较大,需要编辑器配合后台做一些修改。配置文件里的config.lazyload = true;打开的时候,图片上传的时候会加上一个配置的css类名和缓存数据属性字段,特别的需要配置config.extraAllowedContent,因为是非标准属性,默认会被CKeditor过滤掉。config.lazyloadImg现在是没有意义的,本来打算在CKeditor里把图片默认的src地址也处理掉,但是这里会影响编辑的时候图片显示,而且切换源码的时候还得来回替换,非常累赘。所以目前把图片src放到后台程序处理,再配合JQuery lazylaod插件使用。
写在最后
1、我把新版文件也放在原来的地方,方便有收藏的人看到更新。
2、如果是dedecms之类需要拖拽上传、黏贴上传功能的,需要确定编辑器正常加载了uplodimage插件,可能需要修改dedecms程序,否者会导致功能不可用。
3、其实优化版跟无压缩版本来说,节省的请求数量多,其他没有多大的差距,特别是无压缩版本也删掉了注释、服务器开启了js压缩的情况下。正式环境中的samples文件夹可以删掉。