阿里云OSS、七牛云CKeditor上传插件

来源:原创城子居 / 2017-03-25 20:05
新版CKeditor七牛云、阿里云OSS插件修改基于CKeditor 4.7的源码,保留了CKeditor原有的上传功能,新增配置上传至七牛云和阿里云OSS功能。相比之前版本,多了上传至阿里云的功能,去掉了七牛云...

新版CKeditor七牛云、阿里云OSS插件修改基于CKeditor 4.7的源码,保留了CKeditor原有的上传功能,新增配置上传至七牛云和阿里云OSS功能。相比之前版本,多了上传至阿里云的功能,去掉了七牛云JS-SDK。因为前端只用到上传功能,所以没必要使用七牛云的完整功能的JS-SDK。此版本支持配置上传到七牛云、阿里云OSS、本地服务器,非常方便。

新版功能和改变

1、支持配置上传到阿里云OSS
2、支持配置上传到七牛云
3、支持截图上传、拖拽上传
4、支持从word黏贴图片上传(IE9+)
5、不再使用七牛云官方JS-SDK
6、使用Plupload上传
7、上传文件名使用:时间(ms)+_+原文件名

阿里云OSS、七牛云通用CKeditor上传插件

上传环境配置

a、上传至阿里云OSS,需要先配置签名文件。我们上传时需要签名,签名由服务器端的SDK生成。例如这里我用到的是php版本的服务器SDK,只需要一个get.php文件,具体需要参考阿里云OSS官方SDK配置文档。配置好之后,访问这个文件就可以获得签名了,需要输出policyBase64、accessid、signature、path_key(dir参数可选),以便于我们后面在ckeditor中使用。(以下代码配置在调用ckeditor的页面

JavaScript    var xmlhttp;
    if (window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest()
} else if (window.ActiveXObject) {
	try {
		xmlhttp = new ActiveXObject("MSXML2.XMLHTTP")
	} catch (e) {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
	}
}
    phpUrl = './get.php';  // 配置好的阿里云OSS SDK访问地址,这里是php的。
    xmlhttp.open( "GET", phpUrl, false );
    xmlhttp.send( null );
    var obj = eval ("(" + xmlhttp.responseText+ ")");
    policyBase64 = obj['policy'];  //以下变量名不可修改,CKeditor中有用到。
    accessid = obj['accessid'];
    signature = obj['signature'];
    expire = parseInt(obj['expire']);
    path_key = obj['dir'];


b、上传至七牛云,需要提供token验证。所以在使用ckeditor编辑器之前,我们先需要配置服务器端SDK生成一个用于上传的uptoken变量。服务器端SDK配置参考七牛云官方文档。(以下代码配置在调用ckeditor的页面

JavaScript    // 由七牛云服务器端SDK生成,变量名uptoken不要修改,因为在ckeditor中有用到。
    // 服务器SDK配置方法,参考七牛云官方文档。
    uptoken = 'xxxxxx_Your_token_xxxxxxxx';

Plupload、CKeditor引入

在图片上传对话窗口,需要Plupload来上传文件到阿里云OSS或者七牛云。这里我们需要下载pluoload文件,然后引入plupload.full.min.js (以下代码配置在调用ckeditor的页面

HTML<!-- // 如果你的ckeditor是由程序引入的,则需要保证在引入编辑器之前
     // 先输出签名或者uotoken,然后引入plupload,再引入编辑器。-->
<script language="javascript" src="../js/plupload.full.min.js"></script>
<script language="javascript" src="../ckeditor/ckeditor.js"></script>

CKeditor配置

需要在ckeditor/config.js中配置一些必要的参数。除了原本CKeditor的配置选项之外,我把一些需要用到的参数也加在其中了,比如云上传地址、Bucket地址。

JavaScript/**
 * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {

	// 至少需要加载uploadimage,filebrowser两个扩展
	config.extraPlugins = 'uploadimage,filebrowser';


	// Save images to Qiniu or Ali OSS. If seted saveto, must be set: BucketDomain
	config.saveto = 'qiniu';  //标记值(alioss|qiniu|local)其中local代表filebrowserImageUploadUrl
    config.BucketDomain = 'https://img.imyme.cn'; //Bucket绑定的域名
    config.UploadDomain = 'https://up.qbox.me';   //七牛云、阿里云OSS上传地址,视情况而定
	config.PluploadFlashSwfUrl = '/js/Moxie.swf'; //Plupload 中flash地址

	// Images use lazyload. If seted lazyload, must be set: lazyloadattribute, config.extraAllowedContent
	// config.lazyload = true;  //图片加载启用lazyload
	// config.lazyloadAttribute = 'data-original'; //储存lazyload真实图片地址
	// config.lazyloadCss = 'lazy';  //lazyload 标记CSS值
	// config.extraAllowedContent = 'img[data-original]';  //设置图片保存储存lazyload值

	config.filebrowserImageBrowseUrl = "../select_images.php";
	config.filebrowserFlashBrowseUrl = "../select_media.php";
	config.filebrowserImageUploadUrl  = "../select_images_post.php";

};

写在最后

1、我把新版文件也放在原来的地方,方便有收藏的人看到更新。
2、如果是dedecms之类需要拖拽上传、黏贴上传功能的,需要确定编辑器正常加载了uplodimage,fliebrowser插件,可能需要修改dedecms程序,否者会导致功能不可用。
3、正式环境中的samples文件夹可以删掉。
4、上传到阿里云OSS或者七牛云,只需要配置对应的环境。
最后,由于时间和精力的关系,我不提供免费服务,请见谅。

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

23
0

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

文章讨论

延伸阅读