**將兩者結合** 我們將對合并出來的代碼進行改造， 改造之后，wangEditor將把plupload的功能集成進來。 需要改造的地方有： - 配置wangEditor()方法的 uploadImgComponent 參數，傳入 $uploadContainer - 定義event變量，用于存儲上傳事件中的event對象 - 所有文件上傳完成之后，使用 editor.command() 方法插入圖片 >具體內容可參考如下代碼，**標注『重要』的部**分： ```html <!--引入wangEditor.css--> <link rel="stylesheet" type="text/css" href="css/wangEditor-1.3.10.css"> ……省略其他內容…… <div id="uploadContainer"> <input type="button" value="選擇文件" id="btnBrowse"/> <input type="button" value="上傳文件" id="btnUpload"> <ul id="fileList"></ul> </div> <textarea id='textarea1' style='height:300px; width:100%;'></textarea> ……省略其他內容…… <!--引入jquery、wangEditor.js、plupload.js--> <script type="text/javascript" src='js/jquery-1.10.2.min.js'></script> <script type="text/javascript" src='js/wangEditor-1.3.10.min.js'></script> <script type="text/javascript" src="plupload/plupload.full.min.js"></script> <script type="text/javascript"> $(function(){ //獲取dom節點 var $uploadContainer = $('#uploadContainer'), $fileList = $('#fileList'), $btnUpload = $('#btnUpload'); var editor = $('#textarea1').wangEditor({ //重要：傳入 uploadImgComponent 參數，值為 $uploadContainer uploadImgComponent: $uploadContainer }); //實例化一個上傳對象 var uploader = new plupload.Uploader({ browse_button: 'btnBrowse', url: 'upload.ashx', flash_swf_url: 'plupload/Moxie.swf', sliverlight_xap_url: 'plupload/Moxie.xap', filters: { mime_types: [ //只允許上傳圖片文件 （注意，extensions中，逗號后面不要加空格） { title: "圖片文件", extensions: "jpg,gif,png,bmp" } ] } }); //存儲多個圖片的url地址 var urls = []; //重要：定義 event 變量，會在下文（觸發上傳事件時）被賦值 var event; //初始化 uploader.init(); //綁定文件添加到隊列的事件 uploader.bind('FilesAdded', function (uploader, files) { //顯示添加進來的文件名 $.each(files, function(key, value){ var fileName = value.name, html = '<li>' + fileName + '</li>'; $fileList.append(html); }); }); //單個文件上傳之后 uploader.bind('FileUploaded', function (uploader, file, responseObject) { //從服務器返回圖片url地址 var url = responseObject.response; //先將url地址存儲來，待所有圖片都上傳完了，再統一處理 urls.push(url); }); //全部文件上傳時候 uploader.bind('UploadComplete', function (uploader, files) { // 用 try catch 兼容IE低版本的異常情況 try { //打印出所有圖片的url地址 $.each(urls, function (key, value) { //重要：調用 editor.command 方法，把每一個圖片的url，都插入到編輯器中 //重要：此處的 event 即上文定義的 event 變量 editor.command(event, 'insertHTML', '<img src="' + value + '"/>'); }); } catch (ex) { // 此處可不寫代碼 } finally { //清空url數組 urls = []; //清空顯示列表 $fileList.html(''); } }); //上傳事件 $btnUpload.click(function(e){ //重要：將事件參數 e 賦值給 上文定義的 event 變量 event = e; uploader.start(); }); }); </script> ``` 至此，配置結束。此時在此點擊“圖片”按鈕，就能使用plupload上傳圖片了。