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

来源:原创城子居 / 2016-07-11 02:04
CKeditor七牛云上传插件,集成七牛云JS SDK功能,通过CKeditor直接上传到七牛云,无需通过自己网站服务器上传,节省珍贵的服务器带宽和流量。最新版本,一键切换上传至阿里云OSS、七牛云、本...

七牛云官方有放出JS SDK,没有我想使用的CKeditor前端上传插件,所以结合七牛官方的Javascript SDK对CKeditor做了一些修改使它能够直接上传到七牛云,又同时保留了上传到本地服务的接口。最新版本,一键切换上传至阿里云OSS、七牛云、本地服务器:《阿里云OSS、七牛云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,然后再加载编辑器了。

HTML<!-- 需要在加载编辑之前定义以下内容。可以参考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填入图片上传对话框。

JavaScriptfunction 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。

JavaScriptif ( 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。

JavaScript//在文件底部,我们加一个七牛云初始化的函数。
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 + "&nbsp;&nbsp;&nbsp;(" + plupload.formatSize(file.size) + ")&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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
		}
	}
});
}
JavaScript//我们修改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无法点击的问题。

JavaScript//我们修改下对话框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,这个文件影响到剪切板黏贴图片、拖拽图片到编辑窗口的文件上传。

JavaScript//判断储存位置,然后加入对应的数据
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 );
JavaScriptif ( 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://....这种类型的,是没办法自动上传的,因为浏览器出于安全考虑,是不能直接访问系统路径的图片的。

JavaScripturl += 'CKEditor=' + editor.name + '&CKEditorFuncNum=2&langCode=' + editor.langCode;
// send tu qiniu.com 
if ( saveto='qiniu' ) {
	url=qiniu_upload_domain;
}
JavaScript//拼凑数据,同样这里没有使用七牛云的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是没压缩过的。最新版本,一键切换上传至阿里云OSS、七牛云、本地服务器,配置更加方便:《阿里云OSS、七牛云CKeditor上传插件

另外,由于我的电脑上没有IE11,所以后面这段imagepaste的word图片黏贴代码没有测试。基本代码在这里了,有错误应该也不大,自行调试下应该就可以搞定了。再之,由于时间和精力的关系,我不提供免费服务,请见谅。

点踩的人什么心态?不需要就不要看就是。

下载链接:http://pan.baidu.com/s/1kUUVjCV    提取码:eife  自立更生互助QQ群:CKeditor_Plugins_for_Qiniu 159257448

79
1

本站原创内容请勿转载,因为这样大家可以聚集在这里讨论,请将本文链接分享给他/她!

文章讨论

延伸阅读