wangEditor編輯器從`v2.0.14`版本開始，將支持使用[七牛云存儲](http://www.qiniu.com/)上傳圖片。 但是，在使用編輯器集成七牛云存儲之前，還需要閱讀[七牛云存儲javascript sdk](http://developer.qiniu.com/code/v6/sdk/javascript.html)的文檔，來了解七牛云存儲js sdk的使用方法。否則也無法順利使用。 ---- **本地運行一個wangEditor上傳七牛的demo** 作者在github專門fork了[七牛官網js-sdk的demo](https://github.com/qiniu/js-sdk)，然后通過修改，制作了一個[wangEditor上傳七牛的demo](https://github.com/wangfupeng1988/js-sdk)，點擊[這里](https://github.com/wangfupeng1988/js-sdk#3-本地運行這個demo)，可以看到如何在本地運行這個demo。 --- **代碼演示** 以下代碼將演示如何在wangEditor中使用七牛云存儲，注意看代碼中的注釋。詳細的代碼，可去[https://github.com/wangfupeng1988/js-sdk/blob/master/demo/views/wangEditor.html](https://github.com/wangfupeng1988/js-sdk/blob/master/demo/views/wangEditor.html)查看。 ```html <div id="editor-container" class="container"> <div id="editor-trigger"> <p>請輸入內容...</p> </div> </div> <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../wangEditor/js/wangEditor.js"></script> <script type="text/javascript" src="../js/plupload/plupload.full.min.js"></script> <script type="text/javascript" src="../js/plupload/i18n/zh_CN.js"></script> <script type="text/javascript" src="/js/qiniu.js"></script> <script type="text/javascript"> // 封裝 console.log 函數 function printLog(title, info) { window.console && console.log(title, info); } // 初始化七牛上傳 function uploadInit() { // this 即 editor 對象 var editor = this; // 觸發選擇文件的按鈕的id var btnId = editor.customUploadBtnId; // 觸發選擇文件的按鈕的父容器的id var containerId = editor.customUploadContainerId; // 創建上傳對象 var uploader = Qiniu.uploader({ runtimes: 'html5,flash,html4', //上傳模式,依次退化 browse_button: btnId, //上傳選擇的點選按鈕，**必需** uptoken_url: '/uptoken', //Ajax請求upToken的Url，**強烈建議設置**（服務端提供） // uptoken : '<Your upload token>', //若未指定uptoken_url,則必須指定 uptoken ,uptoken由其他程序生成 // unique_names: true, // 默認 false，key為文件名。若開啟該選項，SDK會為每個文件自動生成key（文件名） // save_key: true, // 默認 false。若在服務端生成uptoken的上傳策略中指定了 `sava_key`，則開啟，SDK在前端將不對key進行任何處理 domain: 'http://xxx.xxx.xxx.xxx.clouddn.com/', //bucket 域名，下載資源時用到，**必需** container: containerId, //上傳區域DOM ID，默認是browser_button的父元素， max_file_size: '100mb', //最大文件體積限制 flash_swf_url: '../js/plupload/Moxie.swf', //引入flash,相對路徑 filters: { mime_types: [ //只允許上傳圖片文件 （注意，extensions中，逗號后面不要加空格） { title: "圖片文件", extensions: "jpg,gif,png,bmp" } ] }, max_retries: 3, //上傳失敗最大重試次數 dragdrop: true, //開啟可拖曳上傳 drop_element: 'editor-container', //拖曳上傳區域元素的ID，拖曳文件或文件夾后可觸發上傳 chunk_size: '4mb', //分塊上傳時，每片的體積 auto_start: true, //選擇文件后自動上傳，若關閉需要自己綁定事件觸發上傳 init: { 'FilesAdded': function(up, files) { plupload.each(files, function(file) { // 文件添加進隊列后,處理相關的事情 printLog('on FilesAdded'); }); }, 'BeforeUpload': function(up, file) { // 每個文件上傳前,處理相關的事情 printLog('on BeforeUpload'); }, 'UploadProgress': function(up, file) { // 顯示進度條 editor.showUploadProgress(file.percent); }, 'FileUploaded': function(up, file, info) { // 每個文件上傳成功后,處理相關的事情 // 其中 info 是文件上傳成功后，服務端返回的json，形式如 // { // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", // "key": "gogopher.jpg" // } printLog(info); // 參考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html var domain = up.getOption('domain'); var res = $.parseJSON(info); var sourceLink = domain + res.key; //獲取上傳成功后的文件的Url printLog(sourceLink); // 插入圖片到editor editor.command(null, 'insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>') }, 'Error': function(up, err, errTip) { //上傳出錯時,處理相關的事情 printLog('on Error'); }, 'UploadComplete': function() { //隊列文件處理完畢后,處理相關的事情 printLog('on UploadComplete'); // 隱藏進度條 editor.hideUploadProgress(); } // Key 函數如果有需要自行配置，無特殊需要請注釋 //, // 'Key': function(up, file) { // // 若想在前端對每個文件的key進行個性化處理，可以配置該函數 // // 該配置必須要在 unique_names: false , save_key: false 時才生效 // var key = ""; // // do something with key here // return key // } } }); // domain 為七牛空間（bucket)對應的域名，選擇某個空間后，可通過"空間設置->基本設置->域名設置"查看獲取 // uploader 為一個plupload對象，繼承了所有plupload的方法，參考http://plupload.com/docs } // 生成編輯器 var editor = new wangEditor('editor-trigger'); editor.config.customUpload = true; // 設置自定義上傳的開關 editor.config.customUploadInit = uploadInit; // 配置自定義上傳初始化事件，uploadInit方法在上面定義了 editor.create(); </script> ```