wangEditor上传图片事件抛出处理+解决Form-Making中无法粘贴

项目背景:

项目中无法直接修改插件中的富文本编辑器,只能先修改插件的富文本编辑器源码,然后打包插件最后放到项目中运行,所以需要将插件中富文本编辑器的上传图片事件抛出

使用Form-Making 自定义表单插件的时候,遇到无法粘贴表格的问题,查看源码后得知,是form-making中使用的vue2-editor富文本编辑器无法粘贴表格,搜索很久无法查阅到关于vue2-editor中如合粘贴表格,于是决定修改form-making中的源码,将vue2-editor替换成wangEditor富文本编辑器,

配置好wangEditor组件后发现,wangEditor的初始化是定义在mounted中的,如果不配置好就无法上传图片,而项目中的上传路径是不确定的,于是考虑将wangEditor的上次事件抛出来

 因为props可以传递方法,所以考虑将customConfig作为一个对象,从调用的地方传过来,

props: {
  customConfig: {
      type: Object,
      default() {
        return {
          uploadImgHooks: {},
          uploadImgServer: '',
          uploadImgHeaders: {},
          uploadImgShowBase64: false
        }
    }
  },
}

mounted(){
this.editor.customConfig.uploadImgServer = this.customConfig.uploadImgServer || '';
      this.editor.customConfig.uploadFileName = "file";
      this.editor.customConfig.uploadImgShowBase64 = this.customConfig.uploadImgShowBase64 || false
      this.editor.customConfig.uploadImgHeaders = this.customConfig.uploadImgHeaders || {
        token: ''
      };

      let uploadImgHooks = {
        before: (xhr, editor, result) => { },
        success: (xhr, editor, result) => { },
        fail: (xhr, editor, result) => { },
        error: () => { },
        timeout: () => { },
        customInsert: (insertImg, result) => {},
        ...this.customConfig.uploadImgHooks,
      }
      this.editor.customConfig.uploadImgHooks = this.customConfig.uploadImgHooks || {
        before: function (xhr, editor, result) {
          uploadImgHooks.before(xhr, editor, result)
        },
        success: function (xhr, editor, result) {
          uploadImgHooks.success(xhr, editor, result)
        },
        fail: function (xhr, editor, result) {
          uploadImgHooks.fail(xhr, editor, result)
        },
        error: function () {
          uploadImgHooks.error()
        },
        timeout: function () {
          uploadImgHooks.timeout()
        },
        customInsert: function (insertImg, result) {
          uploadImgHooks.customInsert(insertImg, result)
        }
      };
}

调用之处

//此处简写,其他参数自己加,直接抄会报错
<wang-editor :custom-config="customConfig"/>

computed:{
     customConfig(){
         let obj = {
           uploadImgHooks: {
                    customInsert: this.customInsert,
                    success: this.wangSuccess
           },
           uploadImgHeaders:{
                    token: this.token //此处填传过去的token
           },
           uploadImgServer: `${baseUrl}/api/file/uploadFile`  //此处根据自身项目变动
         }
         return obj
     }
},

methods:{
    customInsert(insertImg, result){
            //此处能打印到,证明调用成功
            console.log(1,insertImg, result)
            let data = [`${staticUrl}/${result.data.originalPath}`];
            JSON.stringify(data);
            insertImg(data);
    },

}