标签：.com 全局 runtime word set 判断 url ast http
七牛云官方有放出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‘; //七牛云服务端生成的uptokenvar qiniu_upload_domain=‘http://upload.qiniu.com‘; //七牛云上传地址，https需要修改成对应的七牛云https上传域名，如果你是一匹来自北方的狼，那你需要up-z1.qiniu.comvar 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。
|
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;}//对返回的数据处理，提取文件名、拼凑文件URLif ( 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图片黏贴代码没有测试。基本代码在这里了，有错误应该也不大，自行调试下应该就可以搞定了。
标签：.com 全局 runtime word set 判断 url ast http
原文地址：http://www.cnblogs.com/qiniuyun/p/6351842.html
