新版CKeditor七牛云插件修改

Posted 2020-08-29

新版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

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

2.在config.js里配置。

 

01 02 03 04 05 06 07 08 09 10 11 12 13 14

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之后，就可以加载编辑器了。

 

1 2 3

<script src="../js/plupload.full.min.js"></script>[/font][/color][/align][align=left][color=rgb(0, 0, 0)][font=Tahoma, Verdana, Helvetica,] <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文件夹可以删掉。