如果不想使用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)