wangeditor 上传图片

根据 wangeditor 官网的描述来说, 上传图片需要以下几步

我的接口返回格式与官方不同 这里我用的是 customInsert 自定义插图的方式 且语法为 vue2

1. 在 editorConfig 下新建 MENU_CONF, 在该字段下配置上传图片参数

data() {
    return {
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        // 在这里配置上传图片
        MENU_CONF: {
        },
      },
      mode: "default", // or 'simple'
    };
  },

2. 修改 uploadImage 菜单配置

data() {
  return {
    editor: null,
    html: "<p>hello</p>",
    toolbarConfig: {},
    editorConfig: {
      placeholder: "请输入内容...",
      MENU_CONF: {
        uploadImage: {
          // 配置服务端地址
          server: this.$fileBaseurl + "/uploadImageByMultipartFile",
          // 配置fieldName
          fieldName: "file",
          // 配置其他请求参数
          meta: {
            systemName: "finance",
            title: "支出附件",
          },
          // 设置请求头
          headers: {
            token: "95931b371eb64f4a9c862983ca8a5d15",
          },
          // 自定义插入图片
          customInsert(res, insertFn) {
            // res 为接口返回结果, 从 res 中找到 url alt href ，然后插图图片
            insertFn(res.result.path, res.result.title);
          },
        },
        // 继续其他菜单配置...
      },
    },
    mode: "default", // or 'simple'
  };
},