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

七牛云官方有放出JS SDK，没有我想使用的CKeditor前端上传插件，所以结合七牛官方的Javascript SDK对CKeditor做了一些修改使它能够直接上传到七牛云，又同时保留了上传到本地服务的接口。

优点和缺点1.在前端上传到七牛云，不消耗服务器带宽和流量、空间。
2.保留了CKeditor上传到自己服务器的能力。
3.支持拖拽和剪切板黏贴图片上传(因为是保存为png格式，建议只黏贴色彩单调的图片，要不然图片会很大，浪费流量)。
4.拖拽和剪切板黏贴图片。不支持4M以上的文件，因为没有分块，需要上传大尺寸图片，请使用图片对话框。
5.需要用到七牛云的JS-SDK来上传和一个服务器端的SDK来生成token。
6.需要使用CKeditor源码 Big N‘Slow版本，因为需要修改插件。
7.图片名默认为：Uinx时间戳_原文件名。如果需要修改，请对照注释修改，或者自行通过后台管理程序实现。

因为是基于新版的CKeditor 4.5.9，用到上传的功能都做了处理，已打包成plugins.zip：
1.plugins/filebrowser/plugin.js（图片对话框）
2.plugins/image/plugin.js （图片对话框）
3.dialogs/qiniu_image.js（图片对话框）
4.plugins/dialog/plugin.js（图片对话框）
5.plugins/filetool/plugin.js（拖拽和剪切板黏贴图片）
6.plugins/imagepaste/plugin.js（word 图片上传，支持IE11）

CKeditor集成七牛云JS SDK思路先设置储存位置（七牛云注册或者自己服务器，输出JS全局变量设置）。在CKeditor加载的时候，先判断需要储存的位置，然后加载对应的插件，或者上传前判断数据提交的位置，然后通过CKeditor自身提交或者通过七牛云JS SDK提交到七牛云，期间不经过自己服务器，从而实现节省流量、带宽、空间。
环境初始化在编辑器加载之前，我们先定义一些JS全局变量，方便后面使用。至于输出方式，需要自己制定，比如我使用的是php。输出这些JS变量之后，我们就可以引入plupload.full.js、qiniu.main.js，然后再加载编辑器了。

可以引入plupload.full.js、qiniu.main.js，然后再加载编辑器了。


1

2

3

4

5

6

7

<!-- 需要在加载编辑之前定义以下内容。可以参考demo -->

<script language="javascript">

var saveto =‘qiniu‘;   //储存位置为七牛云，对应于插件里的判断值

var qiniu_uptoken=‘xx___your_uptoken___xxx‘;  //七牛云服务端生成的uptoken

var qiniu_upload_domain=‘http://upload.qiniu.com‘;   //七牛云上传地址，https需要修改成对应的七牛云https上传域名，如果你是一匹来自北方的狼，那你需要up-z1.qiniu.com

var qiniu_bucket_domain=‘http://img.yourdomain.com‘;   //七牛云bucket设置的域名

</script>

CKeditor插件修改位置1.plugins/filebrowser/plugin.js 我们修改setUrl函数，通过七牛云返回来的json数据，取出key拼接成URL，输入到这个函数，通过setUrl填入图片上传对话框。


01

02

03

04

05

06

07

08

09

10

11

12

13

14

function setUrl( fileUrl, data ) {

        if( saveto==‘qiniu‘ ) {

                var dialog = CKEDITOR.dialog.getCurrent();

                dialog.setValueOf(‘info‘,‘txtUrl‘, fileUrl );

                return false;

        }

        var dialog = this._.filebrowserSe.getDialog(),

                targetInput = this._.filebrowserSe[ ‘for‘ ],

                onSelect = this._.filebrowserSe.filebrowser.onSelect;

        if ( targetInput )

                dialog.getContentElement( targetInput[ 0 ], targetInput[ 1 ] ).reset();

......................................

}

2.plugins/image/plugin.js 在初始化图片对话框前，我们先判断储存位置，如果是储存到七牛云就加载我们修改过的dialogs/qiniu_image.js。

[JavaScript] 纯文本查看 复制代码

?


1

2

3

4

5

if ( saveto == ‘qiniu‘ ) {

        CKEDITOR.dialog.add( pluginName, this.path + ‘dialogs/qiniu_image.js‘ );

} else {

        CKEDITOR.dialog.add( pluginName, this.path + ‘dialogs/image.js‘ );

}

3.dialogs/qiniu_image.js 是我们复制原来的image.js修改UI，在初始化的时候，同时初始化七牛云的JS SDK。


01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

//在文件底部，我们加一个七牛云初始化的函数。

function savetoqiniu(){

        var uploader = Qiniu.uploader({

        runtimes: "html5,flash,html4",

        browse_button: "setfile",

        uptoken: qiniu_uptoken,

        get_new_uptoken: false,

        domain: qiniu_bucket_domain,

        container: "container",

        max_file_size: "6mb",

        filters: {

                mime_types: [{

                        title: "Image files",

                        extensions: "jpeg,jpg,gif,png,wbmp"

                }]

        },

        flash_swf_url: "./Moxie.swf",

        max_retries: 3,

        dragdrop: true,

        drop_element: "container",

        chunk_size: "4mb",

        auto_start: false,

        init: {

                "PostInit": function() {

                        document.getElementById("uploadfile").onclick = function() {

                //document.getElementById("setfile").style.display = "none";

                                uploader.start();

                                return false

                        }

                },

                "FilesAdded": function(up, files) {

                        plupload.each(files,

                        function(file) {

                                document.getElementById("fileinfo").innerHTML += ‘<div id="‘ + file.id + ‘">‘ + file.name + "   (" + plupload.formatSize(file.size) + ")      <b></b> <i></i></div><br>";

                        })

                },

                "BeforeUpload": function(up, file) {},

                "UploadProgress": function(up, file) {

                        document.getElementById(file.id).getElementsByTagName("b")[0].innerHTML = "<span>" + file.percent + "%</span>"

                },

                "FileUploaded": function(up, file, info) {

                        var res = JSON.parse(info);

                        var sourceLink = qiniu_bucket_domain + "/" + res.key;

            document.getElementById(file.id).getElementsByTagName("i")[0].innerHTML = sourceLink;

                        window.CKEDITOR.tools.callFunction(1, sourceLink, ‘ok‘);

                },

                "Error": function(up, err, errTip) {},

                "UploadComplete": function() {},

                "Key": function(up, file) {

                        var key = "";

                        key = Math.round(new Date().getTime() / 1000) + "_" + file.name;//上传文件名，如果需要请自行修改。file.name为原文件名。

                        return key

                }

        }

});

}

01

02

03

04

05

06

07

08

09

10

11

//我们修改Upload Table不加载原来的图片上传设置，改为加入plupload的文件选择元素、文件上传元素。

{

        id: ‘Upload‘,

        hidden: false,

        label: editor.lang.image.upload,

        elements: [ {

                type: ‘html‘,

                id: ‘upload‘,

                html:‘<div id="fileinfo"></div><div id="container"><a href="javascript:void(0)" id="setfile">[点击选择文件]</a><a href="javascript:void(0)" id="uploadfile">[ 上传 ]</a></div>‘

        }]

}

在图片对话框显示的时候，onload的时候，我们执行之前加入的七牛云的初始化函数savetoqiniu(); 这里具体的位置请参考plugins.zip。
4.plugins/dialog/plugin.js，这里修改解决上传tab无法点击的问题。


1

2

3

4

5

6

//我们修改下对话框tab关闭的判断条件。

//if ( !enableElements || ( requiredContent && !this._.editor.activeFilter.check( requiredContent ) ) )

if ( requiredContent && !this._.editor.activeFilter.check( requiredContent ) )

        tab[ 0 ].addClass( ‘cke_dialog_tab_disabled‘ );

else

        tab[ 0 ].removeClass( ‘cke_dialog_tab_disabled‘ );

5.plugins/filetool/plugin.js，这个文件影响到剪切板黏贴图片、拖拽图片到编辑窗口的文件上传。


01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

//判断储存位置，然后加入对应的数据

editor.on( ‘fileUploadRequest‘, function( evt ) {

        var fileLoader = evt.data.fileLoader,

                formData = new FormData();

        

        if ( saveto == ‘qiniu‘ ) {

                formData.append( ‘file‘, fileLoader.file, fileLoader.fileName );

                formData.append( ‘key‘, Math.round(new Date().getTime()/1000) +‘_‘+ fileLoader.fileName );//上传文件名，如果需要请自行修改。fileLoader.fileName 为image.png。

                formData.append( ‘token‘, qiniu_uptoken );

        } else {

                

                formData.append( ‘upload‘, fileLoader.file, fileLoader.fileName );

                // Append token preventing CSRF attacks.

                formData.append( ‘ckCsrfToken‘, CKEDITOR.tools.getCsrfToken() );

        }

        fileLoader.xhr.send( formData );

}, null, null, 999 );

01

02

03

04

05

06

07

08

09

10

11

if ( response.error && response.error.message ) {

        data.message = response.error.message;

}

//对返回的数据处理，提取文件名、拼凑文件URL

if ( saveto == ‘qiniu‘ ) {

        data.fileName = response.key;

        data.url = qiniu_bucket_domain+ ‘/‘ + response.key;

} else {

        data.fileName = response.fileName;

        data.url = response.url;

}

6.plugins/imagepaste/plugin.js，这个插件很旧了，并且停止了更新，新的SimpleUploads不是免费的，所以还是用这个免费的吧。主要是支持IE11从word直接复制图片黏贴过来，会自动上传，其他像Chrome这样复制过来显示file://....这种类型的，是没办法自动上传的，因为浏览器出于安全考虑，是不能直接访问系统路径的图片的。


1

2

3

4

5

url += ‘CKEditor=‘ + editor.name + ‘&CKEditorFuncNum=2&langCode=‘ + editor.langCode;

// send tu qiniu.com

if ( saveto=‘qiniu‘ ) {

        url=qiniu_upload_domain;

}

01

02

03

04

05

06

07

08

09

10

11

12

13

14

//拼凑数据，同样这里没有使用七牛云的JS-SDK所以这里也不支持黏贴4M以上的文件。

var req = "--" + BOUNDARY;

if ( saveto=‘qiniu‘ ) {

        req += rn + "Content-Disposition: form-data; name=\"file\"";

        var bin = window.atob( data );

        // add timestamp?

        req += "; filename=\"" + Math.round(new Date().getTime() / 1000) + "_" + id + ".png\"" + rn + "Content-type: image/png";//上传文件名，如果需要请自行修改。

        req += rn + rn + bin + rn + "--" + BOUNDARY;

        req += rn +"Content-Disposition: form-data; name=\"token\"" + rn + rn + qiniu_uptoken;

        req += rn + rn + bin + rn + "--" + BOUNDARY;

req += "--";

} else {

        //原来默认拼接的数据的代码

}

写在最后上面就是所有关于CKeditor集成七牛云前端JS SDK的方法和代码了，限于篇幅我只贴出来了修改过的地方，下面的下载链接有这几个文件的小包plugins.zip,也有我用的CKeditor 4.5.9的完整包，还有一个demo.zip。由于我只是在网站后台使用编辑器，且我使用的是http 2.0协议，所以CKeditor是没压缩过的。
另外，由于我的电脑上没有IE11,所以后面这段imagepaste的word图片黏贴代码没有测试。基本代码在这里了，有错误应该也不大，自行调试下应该就可以搞定了。

时间： 2024-08-02 02:49:25

CKeditor七牛云JS SDK前端上传插件修改的相关文章

Android开发中使用七牛云存储进行图片上传下载

Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储原理,上面这幅图片是官方给出的原理图,表述当然比较清晰了.可以看出,要进行图片上传的话可以分为五大步: 1. 客户端用户登录到APP的账号系统里面: 2. 客户端上传文件之前,需要向业务服务器申请七牛的上传凭证,这个凭证由业务服务器使用七牛提供的服务端SDK生成: 3. 客户端使用七牛提供的客户端S

七牛云 网络存储 文件上传

设置自定义域名: 如果你的域名没有备案,哪种云存储都用不了,就不要尝试了.七牛云存储添加自定义域名和域名解析图文教程:http://boke112.com/3870.html 上传文件到七牛 配置依赖: implementation 'com.squareup.okhttp3:okhttp:3.8.0' implementation 'com.squareup.okio:okio:1.13.0' implementation 'com.qiniu:qiniu-android-sdk:7.3.12

前端上传插件Plupload的实际使用（个人实操）

一个主要的页面,其中包裹了一个iframe页面,在项目中,这个iframe页面包裹在主页面的div标签中,主要用于上传文件附件. 用的是plupload.full插件,主要引入以下几个js: jquery-1.11.1.js: moxie.js: plupload.full.min.js: plupload.dev.js: css部分: jquery.plupload.queue.css: 以下是利用该插件实现的完整的前端代码: $(window).load(function () { var

七牛云存储SDK扩展

前些天在使用七牛云存储进行数据上传的过程中,发现七牛提供的SDK仅支持以File的形式进行上传,不支持以InputStream的形式进行上传,特对其进行了相应的扩展,具体扩展如下: import java.io.InputStream; import org.apache.http.entity.mime.MultipartEntity; import org.apache.http.entity.mime.content.InputStreamBody; import org.apache.h

新版CKeditor七牛云插件修改

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

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

Nodejs学习笔记（八）--- Node.js + Express 实现上传文件功能（felixge/node-formidable）

目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次更新已经比较久了^_^! formidable简介 nodejs原生实现上传还是比较麻烦,有兴趣的自已去参考一下网上有网友写的代码 这里选择了formidable,也是githu

CKEditor上传插件

CKEditor上传插件 前言 CKEditor的上传插件不是免费的,特此开发一个与大家共享.此插件是基于ASP.NET MVC下开发的,如果是webform的用户或者其它语言的用户,可以参考把服务器端做相应的修改.看图: 大家可以看到Browse Button和Upload选项卡.下面分步详解三部分的实现:浏览服务器端图片或文件,上传图片或文件,CKEditor配置. 浏览服务器端图片或文件 先上图: 做了一个十分简易的浏览页面,左半部分是文件夹树,右半部分则显示当前文件夹中的图片. ASP.

node.js使用multiparty上传文件

multiparty使用:multiparty文档 https://www.npmjs.com/package/multiparty 下面介绍一下利用formData向后台提交图片的过程:写在前面的话: 1.实例中前端使用的是vue.js,不过并不影响上传思路.2.后台通过multiparty来解析formData step1:先来看一看前端上传部分的代码: 这是我写的一个上传图片的组件,这里并没有进行图片压缩处理(我们可以用canvas来进行图片压缩,自行搜索下即可). 这一段其实也很好理解,