新版CKeditor七牛云插件修改

来源:原创城子居 / 2016-12-05 15:32
之前写的《CKeditor七牛云JS SDK前端上传插件修改》是没有优化压缩过的,而且在返回图片地址的时候,有点问题没处理好。这里新优化了一下,做了一个新的CKeditor七牛云上传插件。...

新版CKeditor七牛云插件修改基于,CKeditor 4.6的源码,CKeditor新版支持从word复制内容直接上传了(IE9+),所以不需要之前的imagepaste老插件了。本来打算对上传的文件名做一个修改,避免同时拖入大量文件,导致文件名相同覆盖的情况,考虑到之前使用的是:Uinx时间戳_原文件名的方式,所以默认还是不修改。很多人觉得文件名对搜索引擎排名有提权作用,其实可以说是基本没有的,所以不用纠结文件名的问题。

新版CKeditor 4.6七牛云插件修改

新版的改动

1、升级到CKeditor 4.6源码,并且保留了CKeditor的原来功能。
2、压缩了文件,主要针对使用http的友好了一些。
3、优化了下配置方式,之前需要输入很多的环境参数,现在只需要在config.js里配置就可以了。
4、配合JQuery lazylaod插件做了一些图片加载优化配置,还需要后台配合。
5、修复了一个Bug,之前可能一些浏览器有上传成功,但是获取图片地址是失败的情况,现在修复了。
6、其他第一版本有的优点,还是有的,第一版:《CKeditor七牛云JS SDK前端上传插件修改》。

环境初始化和配置

1.初始化之前需要服务器输出上传的uptoken (或者在config.js里配置config.qiniuUptokenUrl),当然像下面这样直接输出一个uptoken优先级高。

JavaScript<script type="text/javascript">
	var qiniu_uptoken='xx___your_uptoken___xxx';  //七牛云服务端生成的uptoken
</script>

2.在config.js里配置。

JavaScript	config.extraPlugins = 'uploadimage'; // 拖拽、黏贴上传扩展,有的后台程序对编辑加载参数进行了封装的,需要自己修改程序,可能加载不到这里的扩展配置。
	// Save images to Qiniu. If seted saveto, must be set: qiniuBucketDomain
	// If use uptoken, well not use config.qiniuUptokenUrl
	config.saveto = 'qiniu';  //对于于插件里的判断值。
	config.qiniuBucketDomain = 'https://img.imyme.cn';  //自定义的Bucket域名。
	config.qiniuUploadDomain = 'http://upload.qiniu.com'; //北方网通、https情况,请自己修改。
	config.qiniuUptokenUrl = '/uptoken';   //优先级低于直接输出uptoken
	
	// Images use lazyload. If seted lazyload, must be set: lazyloadattribute, config.extraAllowedContent
	// config.lazyload = true;  //需要后台程序配合处理图片url,默认不开启,需要的自行修改。
	config.lazyloadImg = '/skin/images/logo.png'; //目前没有意义。
	config.lazyloadAttribute = 'data-original';  //图片真实地址。
	config.lazyloadCss = 'lazy';   //图片css类名
	config.extraAllowedContent = 'img[data-original]'; //lazyloadAttribute上设置的属性。

输出七牛云uptoken和配置好参数之后,引入七牛云qiniu.min.js和plupload.full.js之后,就可以加载编辑器了。

HTML<script src="../js/plupload.full.min.js"></script>
<script src="../js/qiniu.min.js"></script>
<script src="../ckeditor/ckeditor.js"></script>

相对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文件夹可以删掉。
最后,由于时间和精力的关系,我不提供免费服务,请见谅。

下载链接:http://pan.baidu.com/s/1kUUVjCV    提取码:eife  自立更生互助QQ群:CKeditor_Plugins_for_Qiniu 159257448

15
0

本站原创内容请勿转载,因为这样大家可以聚集在这里讨论,请将本文链接分享给他/她!

文章讨论

延伸阅读