新版CKeditor七牛云插件修改

新版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文件夹可以删掉。

时间: 2024-07-28 13:13:36

新版CKeditor七牛云插件修改的相关文章

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

七牛云官方有放出JS SDK,没有我想使用的CKeditor前端上传插件,所以结合七牛官方的Javascript SDK对CKeditor做了一些修改使它能够直接上传到七牛云,又同时保留了上传到本地服务的接口. 优点和缺点1.在前端上传到七牛云,不消耗服务器带宽和流量.空间.2.保留了CKeditor上传到自己服务器的能力.3.支持拖拽和剪切板黏贴图片上传(因为是保存为png格式,建议只黏贴色彩单调的图片,要不然图片会很大,浪费流量).4.拖拽和剪切板黏贴图片.不支持4M以上的文件,因为没有分块

WP七牛云插件详解 - WP-QINIU 插件(WordPress连接到七牛云存储)-原创

推荐这款插件: WP-QINIU (WordPress连接到七牛云存储) 安装之后,会在设置和媒体两个菜单项中有显示. 其中设置,是做配置的. 重点: 1.数据存储访问域名:cdnblog.XXX.com(七牛云存储中数据存储空间绑定的域名.) 2.缩略图片样式名: thumb 在七牛后台设置,这样设置后,在媒体菜单中的七牛库可以看到上传图片的缩略图,否则图是挂的. --------------------------------------------------------- WP-QINI

Ueditor结合七牛云存储上传图片、附件和图片在线管理的实现和最新更新

最新下载地址: https://github.com/widuu/qiniu_ueditor_1.4.3 Ueditor七牛云存储版本 注意事项 老版本请查看 : https://github.com/widuu/qiniu_ueditor_1.4.3/tree/v1.0.0 关于地址报错 请修改 php/config.json 中的 uploadQiniuUrl 和 ChunkUploadQiniuUrl 参数,因为最近反馈地区错误报错比较多,举个简单的例子华南地区修改如下 "uploadQi

Kindeditor上传图片到七牛云存储插件(PHP版)

由于工作需要,要使用第三方存储作为图床,发现七牛云挺不错,又可以免费使用10G的空间,决定先试试. 项目中使用的是Kindeditor作为网页编辑器的,七牛云的插件里没有现成的Kindeditor的插件,开始是想看着官方提供的手册,自己开发下,结果不知道是我太笨还是手册太高深,结果愣是没看懂,后来迫于工作进度,差点决定要放弃Kindeditor使用Ueditor,毕竟有现成的插件可用,不过迫于对Kindeditor的热衷,最后还是坚持下来了,尽管没找到Kindeditor上传到七牛云的太多资料,

如何在WordPress中使用七牛云存储

序:七牛云存储可以方便的将网站的图片等数据镜像到七牛云存储的空间,直接从云端将数据返回给用户.这样可以大大节省网站的空间,提升网站的访问速度. 真正显示一键实现WordPress博客静态文件CDN加速.下面主要介绍一下WordPress中七牛云存储插件的使用. 一.申请七牛云存储的账号 首先需要申请七牛云存储的账号,申请好后,点击创建空间,选择空间类型为公开空间,提交 二.配置空间 配置空间,点击一键加速网站. 镜像源填写自己网站域名.确认加速. 这里的robots.txt配置文件内容为: #

WP集成七牛云存储(原创)

借助:七牛镜像存储 WordPress 插件 https://wordpress.org/plugins/wpjam-qiniu/ 安装本插件1.4.5及以上版本,请先安装并激活WPJAM BASIC插件.如果是使用1.4.5以下版本,WPJAM BASIC插件已包含七牛插件,如果启用WPJAM BASIC插件,请先停用插件. 个人总结: 1.在七牛设置一个公开的空间 2.绑定域名在加速域名这里填写自己的网站的二级域名,比如:cdn.yoursite.com .最后点击创建. 3.去你的网站域名

CodeIgniter - 集成七牛云存储

最近有一个项目需要集成七牛云存储的图片存储和调用功能,程序是基于CodeIgniter2.1.3的PHP框架.刚拿到手完全无从下手的感觉,因为像框架这种东西,想从官方的PHPSDK集成进去,需要改动很多地方.还好,有前辈蹚水,我等后辈直接参考或者说是拿来用了.上传插件采用的是plupload. plupload:www.plupload.com/ 多附件上传控件plupload的使用心得:www.cnblogs.com/luckybird/archive/2013/01/15/2861072.h

用ueditor上传图片、文件等到七牛云存储

ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll,我们可以看到以下东西: 其实Qiniu提供的SDK中,是可以利用文件流上传文件的. 所以,根据官方文档提供的案例,我们可以将上传改写成下面的样子: /// <summary> /// 上传文件 /// </summary> /// <param name="key&qu

我为什么选择七牛云存储

在写这篇文章之前先给大家分享一个小福利:2017最新七牛云存储九折优惠券:61d1fd4d 接下来给大家谈一下我用七牛云存储的原因,从七牛一开始的时候我就开始用了,刚开始的时候七牛好像只是做静态存储,那时候我把自己的网站放在七牛上,当然只是一些静态的页面,但是对于一个初中生来说,能做出一个能访问的网站已经很高兴了,当然,那个网站是我自己用记事本一个一个打出来的代码.当时满满的自豪感. 经过了好几年,七牛已经迅速发展成国内数一数二的云存储服务商了.目前的七牛不知在云存储方面位居国内前列,在cdn加