如果不想使用wangEditor自帶的上傳圖片功能，也可以集成其他上傳插件，例如`plupload`。集成其他第三方上傳插件和集成`plupload`的做法基本一致，不再一一贅述了。 ---- 注意，初級程序員或者之前沒有使用過`plupload`的使用者，建議先單獨做一個demo頁面，嘗試使用`plupload`，做出基本的上傳、顯示功能。先不要集成到編輯器中，有錯誤也好單獨排插。以下文檔可供參考： - [plupload官網](http://www.plupload.com/) - [plupload使用介紹](http://www.cnblogs.com/2050/p/3913184.html) - [plupload常用功能demo演示](http://chaping.github.io/plupload/demo) （可查看demo網頁的源碼，學習如何配置） - [plupload文檔](http://chaping.github.io/plupload/doc) ---- 下面就講解如何在wangEditor編輯器中使用plupload。 **第一步，下載`plupload`** 可進入[plupload官網](http://www.plupload.com/)下載，也可以點擊[這里](https://github.com/wangfupeng1988/wangEditor/tree/master/test/plupload/lib)下載（不保證是最新版）,下載之后，保留如下三個文件待用。  **第二步，集成到編輯器** 看如下代碼演示，**代碼中注釋非常清楚，請仔細查閱**： ```html <div id="div1"> <p>請輸入內容...</p> </div> <!--引用jquery--> <script type="text/javascript" src="../../dist/js/lib/jquery-1.10.2.min.js"></script> <!--引用plupload.full.min.js--> <script type="text/javascript" src="lib/plupload/plupload.full.min.js"></script> <!--引用wangEditor.js--> <script type="text/javascript" src="../../dist/js/wangEditor.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 = new plupload.Uploader({ browse_button: btnId, // 選擇文件的按鈕的id url: '/upload', // 服務器端的上傳地址 flash_swf_url: 'lib/plupload/plupload/Moxie.swf', sliverlight_xap_url: 'lib/plupload/plupload/Moxie.xap', filters: { mime_types: [ //只允許上傳圖片文件 （注意，extensions中，逗號后面不要加空格） { title: "圖片文件", extensions: "jpg,gif,png,bmp" } ] } }); //存儲所有圖片的url地址 var urls = []; //初始化 uploader.init(); //綁定文件添加到隊列的事件 uploader.bind('FilesAdded', function (uploader, files) { //顯示添加進來的文件名 $.each(files, function(key, value){ printLog('添加文件' + value.name); }); // 文件添加之后，開始執行上傳 uploader.start(); }); //單個文件上傳之后 uploader.bind('FileUploaded', function (uploader, file, responseObject) { //注意，要從服務器返回圖片的url地址，否則上傳的圖片無法顯示在編輯器中 var url = responseObject.response; //先將url地址存儲來，待所有圖片都上傳完了，再統一處理 urls.push(url); printLog('一個圖片上傳完成，返回的url是' + url); }); //全部文件上傳時候 uploader.bind('UploadComplete', function (uploader, files) { printLog('所有圖片上傳完成'); // 用 try catch 兼容IE低版本的異常情況 try { //打印出所有圖片的url地址 $.each(urls, function (key, value) { printLog('即將插入圖片' + value); // 插入到編輯器中 editor.command(null, 'insertHtml', '<img src="' + value + '" style="max-width:100%;"/>'); }); } catch (ex) { // 此處可不寫代碼 } finally { //清空url數組 urls = []; // 隱藏進度條 editor.hideUploadProgress(); } }); // 上傳進度條 uploader.bind('UploadProgress', function (uploader, file) { // 顯示進度條 editor.showUploadProgress(file.percent); }); } // ------- 創建編輯器 ------- var editor = new wangEditor('div1'); editor.config.customUpload = true; // 配置自定義上傳的開關 editor.config.customUploadInit = uploadInit; // 配置上傳事件，uploadInit方法已經在上面定義了 editor.create(); </script> ``` 詳細的代碼，可參見[https://github.com/wangfupeng1988/wangEditor/tree/master/test/plupload/test.html](https://github.com/wangfupeng1988/wangEditor/tree/master/test/plupload/test.html)