wangEditor集成plupload插件实现跨域上传

如果不想使用wangEditor自带的上传图片功能，也可以集成其他上传插件，例如plupload。集成其他第三方上传插件和集成plupload的做法基本一致，不再一一赘述了。

---

注意，初级程序员或者之前没有使用过plupload的使用者，建议先单独做一个demo页面，尝试使用plupload，做出基本的上传、显示功能。先不要集成到编辑器中，有错误也好单独排插。以下文档可供参考：

• plupload官网
• plupload使用介绍
• plupload常用功能demo演示 （可查看demo网页的源码，学习如何配置）
• plupload文档

---

下面就讲解如何在wangEditor编辑器中使用plupload。

第一步，下载plupload

可进入plupload官网下载，也可以点击这里下载（不保证是最新版）,下载之后，保留如下三个文件待用。

第二步，集成到编辑器

看如下代码演示，代码中注释非常清楚，请仔细查阅：

<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>

详细的代码，可参见http://www.sojson.com/blog/214.html