JS-wangEditor自定义上传多张图片

wangEditor是一款开源的富文本编辑器，除默认实现，还提供非常多自定义参数，看看如何自定义上传多张图片。

var E = window.wangEditor;
var editor =new E('#description');
initEditor(editor);

editor.customConfig.uploadImgServer = 'product/upload';
editor.customConfig.uploadImgHooks = {
    fail:function (xhr, editor, result) {
        //上传错误时触发
        alert("上传图片失败");
    }
};
editor.customConfig.customUploadImg = function(files, insert) {
    var formData = new FormData();
    for(var i = 0;i < files.length;i ++) {
        formData.append("files[" + i + "]", files[i], files[i].name);
    }
    $.ajax({
        url: rootPath + 'product/upload',
        type: "POST",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success:function(da){
            if(da.errno == 0){
                for(var j=0;j<da.data.length;j++){
                    insert(da.data[j]);
                }
            }else{
                alert(da.msg);
                return;
            }
        }
    });
};

// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 30;
// 或者 var editor = new E( document.getElementById('editor') )
editor.create();

通过自定义参数customUploadImg，重写上传图片逻辑，上传成功后返回图片地址，再添加到富文本编辑框中。