CKeditor七牛云JS SDK前端上传插件修改-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

CKeditor七牛云JS SDK前端上传插件修改

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

新版的改动


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

环境初始化和配置


1.初始化之前需要服务器输出上传的uptoken (或者在config.js里配置config.qiniuUptokenUrl),当然像下面这样直接输出一个uptoken优先级高。 [font=Georgia, Times, 'Times New Roman']JavaScript<script type="text/javascript">var qiniu_uptoken='xx___your_uptoken___xxx';  //七牛云服务端生成的uptoken</script>
2.在config.js里配置。 [font=Georgia, Times, 'Times New Roman']JavaScript    config.extraPlugins = 'uploadimage'; // 拖拽、黏贴上传扩展,有的后台程序对编辑加载参数进行了封装的,需要自己修改程序,可能加载不到这里的扩展配置。// Save images to Qiniu. If seted saveto, must be set: qiniuBucketDomain// If use uptoken, well not use config.qiniuUptokenUrlconfig.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之后,就可以加载编辑器了。 [font=Georgia, Times, 'Times New Roman']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文件夹可以删掉。
最后,由于时间和精力的关系,我不提供免费服务,请见谅。
缓存 JavaScript 前端开发 搜索推荐 开发工具
分享到
取消 提交回答
全部回答(0)
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题