wangEditor3 图片上传本地服务器

wangEditor是一款基于javascript和css开发的 Web富文本编辑器，有轻量、简洁、易用、开源免费等优点。
官网：www.wangeditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
下载链接：github.com/wangfupeng1988/wangEditor/releases

 这个编译器虽然是个人维护的，但是本人还是感觉不错，没有像百度编译器那样繁重。

优点：作者一直有更新，并且有QQ群： 164999061，github，作者能及时的回答问题。有一点非常赞的一点，代码注释非常好。并且有区分开发和上线提示，并且判断Console日志输出

缺点：缺少各种demo，不过好在作者注释很详细

下边说下最近用到是遇到的问题，编译内容图片上传本地服务器上

下再好的源码后，找到test-uploadimg.html文件

注：此文件中引用的wangEditor.min.js文件位置是错误的，修改此文件的引入

然后在 页面上js  editor2.create()之前加入

editor2.customConfig.uploadImgServer = 'upload.php'

1、这个是配置本地图片上传的位置，加上这个后前台页面就会出现上传图片按钮

2、更改基本配置

默认限制图片大小是 5M

// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024

限制一次最多能传几张图片

默认为 10000 张（即不限制），需要限制可自己配置

// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5

 自定义 fileName

上传图片时，可自定义filename，即在使用formdata.append(name, file)添加图片文件时，自定义第一个参数。

editor.customConfig.uploadFileName = 'yourFileName'

自定义 header

上传图片时刻自定义设置 header

editor.customConfig.uploadImgHeaders = {
    'Accept': 'text/x-json'
}

监听函数

可使用监听函数在上传图片的不同阶段做相应处理

editor.customConfig.uploadImgHooks = {
    before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
    },
    success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },
    timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },

    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
       insertImg(result.data)

        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
    }
}

3、 上传图片

    下边我们就来到坑边了,此处你会发现明明图片已经上传成功了，可是前台还是会显示上传失败

这个错误手册上没有明确的说

从这个地方我们会发现返回的数据可能有问题，按手册这个说法，我们这个地方返回的数据格式应该是

{errno:0,data:[...]}这样的数据（但是这个博主没有试，大家可以自行去试）我们用自定义插入图片

注意这个地方的返回数据是图片上传的路径

下边附上本文实例的代码 

 github地址 https://github.com/jiangmingkai/wangEditor-3.0.15-upload

 码云地址 https://gitee.com/jmk