第一步：npm i wangeditor --save
第二步：import E from 'wangeditor';
第三步：` mounted(){
this.editor = new E(’#div1’);
this.editor.config.showLinkImg = false;
this.editor.config.uploadImgServer = ‘上传图片的url’ // 配置上传图片的接口
this.editor.config.uploadImgHooks = {
before: function(xhr) {
console.log(xhr)
// 可阻止图片上传
return {
prevent: true,
msg: ‘需要提示给用户的错误信息’
}
},
success: function (xhr, editor, result) {
console.log(‘成功’)
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
console.log(result)
console.log(‘失败1’)
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
console.log(‘错误1’)
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 上传图片超时
timeout: function(xhr) {
console.log(‘timeout’)
},
// 返回的图片不能直接使用时，在这里重写
customInsert: function(insertImgFn, result) {
// result 即服务端返回的接口
console.log(‘customInsert’, result)

            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            var tempImg = '你的图片地址'
            insertImgFn(tempImg)
        }
    }
    this.editor.create(); // 创建富文本
},`
附：仔细看api上面都有，有疑问欢迎留言，大家一起讨论