**将两者结合** 我们将对合并出来的代码进行改造， 改造之后，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上传图片了。