Ueditor做为百度的可视化编辑器，受到了广大用户的追捧！而七牛云储存是专门为用户提供附件存储、快速上传、附件安全的一个云产品，很多公司不打算 用镜像存储的方法来同步数据，而是想通过可视化编辑器，将图片、附件等上传到七牛云存储，因为一个网站上主要是附件和图片占用资源多，对带宽的耗损比较严 重！Ueditor和七牛云存储的结合实现了-图片和附件直接上传到七牛，图片在线管理等功能~~
(1)安装使用
(1)下载安装包-并解压到自己的目录
(2)修改配置文件
修改Ueditor根目录下的ueditor.config.js其中的配置如下
,imagePath:"七牛分配的域名或者你绑定的域名"
,savePath: ['your bucket']
,filePath:"七牛分配的域名或者你绑定的域名"
,imageManagerPath:"七牛分配的域名或者你绑定的域名"
修改根目录下/php/conf.php中的代码
$QINIU_ACCESS_KEY = 'your ak';
$QINIU_SECRET_KEY = 'your sk';
$BUCKET = "your bucket";
(3)OK了，下边就是你添加ueditor在你的网站上了，跟官方配置是一样的
图片在线管理
目前已经升级到1.0版本下载地址不变，更新说明见
本站会对程序插件进行更新和维护，如果您有问题请直接提交您的问题!用了七牛云储存插件，也配置好了，直接上传还会到服务吗_wordpress吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：40,423贴子：
用了七牛云储存插件，也配置好了，直接上传还会到服务吗收藏
用了七牛云储存插件，也配置好了，直接上传图片是上传到服务器，还是七牛云
花旗信用卡
会镜像到七牛
服务器里图片上传到七牛 曾经上传到服务器上的图片可以删了吗？
七牛真不错　　　　------欢迎访问【沙耔博客】～
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或CKeditor七牛云JS SDK前端上传插件修改 - 七牛开发者 - 博客园
随笔 - 4, 文章 - 0, 评论 - 2, 引用 - 0
七牛云官方有放出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，然后再加载编辑器了。
&script language="javascript"&
var saveto ='qiniu';&& //储存位置为七牛云，对应于插件里的判断值
var qiniu_uptoken='xx___your_uptoken___xxx';& //七牛云服务端生成的uptoken
var qiniu_upload_domain='';&& //七牛云上传地址，https需要修改成对应的七牛云https上传域名，如果你是一匹来自北方的狼，那你需要up-
var qiniu_bucket_domain='';&& //七牛云bucket设置的域名
CKeditor插件修改位置1.plugins/filebrowser/plugin.js 我们修改setUrl函数，通过七牛云返回来的json数据，取出key拼接成URL，输入到这个函数，通过setUrl填入图片上传对话框。
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.onS
&&&&&&&&if ( targetInput )
&&&&&&&&&&&&&&&&dialog.getContentElement( targetInput[ 0 ], targetInput[ 1 ] ).reset();
......................................
2.plugins/image/plugin.js 在初始化图片对话框前，我们先判断储存位置，如果是储存到七牛云就加载我们修改过的dialogs/qiniu_image.js。
[JavaScript]&纯文本查看&复制代码
if ( saveto == 'qiniu' ) {
&&&&&&&&CKEDITOR.dialog.add( pluginName, this.path + 'dialogs/qiniu_image.js' );
&&&&&&&&CKEDITOR.dialog.add( pluginName, this.path + 'dialogs/image.js' );
3.dialogs/qiniu_image.js 是我们复制原来的image.js修改UI，在初始化的时候，同时初始化七牛云的JS SDK。
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() {
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&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.
&&&&&&&&&&&&document.getElementById(file.id).getElementsByTagName("i")[0].innerHTML = sourceL
&&&&&&&&&&&&&&&&&&&&&&&&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.
&&&&&&&&&&&&&&&&&&&&&&&&return key
&&&&&&&&&&&&&&&&}
&&&&&&&&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无法点击的问题。
if ( requiredContent && !this._.editor.activeFilter.check( requiredContent ) )
&&&&&&&&tab[ 0 ].addClass( 'cke_dialog_tab_disabled' );
&&&&&&&&tab[ 0 ].removeClass( 'cke_dialog_tab_disabled' );
5.plugins/filetool/plugin.js，这个文件影响到剪切板黏贴图片、拖拽图片到编辑窗口的文件上传。
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 );
&&&&&&&&&&&&&&&&formData.append( 'token', qiniu_uptoken );
&&&&&&&&} else {
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&formData.append( 'upload', fileLoader.file, fileLoader.fileName );
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&formData.append( 'ckCsrfToken', CKEDITOR.tools.getCsrfToken() );
&&&&&&&&fileLoader.xhr.send( formData );
}, null, null, 999 );
if ( response.error && response.error.message ) {
&&&&&&&&data.message = response.error.
if ( saveto == 'qiniu' ) {
&&&&&&&&data.fileName = response.
&&&&&&&&data.url = qiniu_bucket_domain+ '/' + response.
&&&&&&&&data.fileName = response.fileN
&&&&&&&&data.url = response.
6.plugins/imagepaste/plugin.js，这个插件很旧了，并且停止了更新，新的SimpleUploads不是免费的，所以还是用这个免费的吧。主要是支持IE11从word直接复制图片黏贴过来，会自动上传，其他像Chrome这样复制过来显示file://....这种类型的，是没办法自动上传的，因为浏览器出于安全考虑，是不能直接访问系统路径的图片的。
url += 'CKEditor=' + editor.name + '&CKEditorFuncNum=2&langCode=' + editor.langC
if ( saveto='qiniu' ) {
&&&&&&&&url=qiniu_upload_
var req = "--" + BOUNDARY;
if ( saveto='qiniu' ) {
&&&&&&&&req += rn + "Content-Disposition: form- name=\"file\"";
&&&&&&&&var bin = window.atob( data );
&&&&&&&&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- name=\"token\"" + rn + rn + qiniu_
&&&&&&&&req += rn + rn + bin + rn + "--" + BOUNDARY;
req += "--";
写在最后上面就是所有关于CKeditor集成七牛云前端JS SDK的方法和代码了，限于篇幅我只贴出来了修改过的地方，下面的下载链接有这几个文件的小包plugins.zip,也有我用的CKeditor 4.5.9的完整包，还有一个demo.zip。由于我只是在网站后台使用编辑器，且我使用的是http 2.0协议，所以CKeditor是没压缩过的。另外，由于我的电脑上没有IE11,所以后面这段imagepaste的word图片黏贴代码没有测试。基本代码在这里了，有错误应该也不大，自行调试下应该就可以搞定了。May 3rd , 2016
Typecho有个第三方插件使用七牛SDK自动将上传的图片同步到七牛，但是感觉这个插件某些时候似乎有些问题，导致上传失败，不知道是七牛接口原因还是插件原因导致。分享一下免插件实现将Typecho文章图片自动替换为七牛地址，从而实现托管图片的目的。注册七牛和实名认证这些就省略了，七牛官网地址： ，首先创建一个空间（bucket），如下我已经创建了一个名为 typecho的空间，然后设置镜像存储，镜像源填写你的博客地址（），最后保存设置。找到七牛为您当前空间分配的测试域名，或者您自行绑定域名，待会儿需要用到。找到typecho的文章页面文件,主题目录下的post.php文件，找到：&?php $this-&content(); ?&
将其替换为：&?php echo $str = str_replace(&xianmu.me/usr/uploads&,&七牛镜像域名/usr/uploads&,$this-&content); ?&
这个方法的原理就是七牛支持镜像存储，设置镜像源后，当你访问七牛的地址会自动从源地址获取对应文件并抓取过来，连SDK都不需要使用。
支付宝打赏
发表新评论