[Vue2+wangEditor] 简单配置实现富文本编辑器图片上传并回显

前情提要

编辑器安装及使用步骤, 官方文档写得十分清晰明了, 点击下方链接直接食用即可。
简单创建一个富文本编辑器的方法(官方文档)
这里只记录总结本人在配置编辑器的图片上传功能过程中, 遇到的一些问题和要点。

图片上传必要的配置

图片上传的相关配置是 editorConfig.MENU_CONF.uploadImage , 思路是前台将图片上传到后台, 后台返回图片的服务器地址给前台。

一开始照搬官方文档的配置, 上传接口一直报错, 用 postman 确认接口没问题后, 删除了一些没必要的配置, 只留下面这些配置就成功上传了。

  editorConfig: {
    placeholder: '请输入内容...',
    // 所有的菜单配置，都要在 MENU_CONF 属性下
    MENU_CONF: {
      uploadImage: {
        // 图片文件上传接口地址
        server: `${process.env.VUE_APP_BASE_API}/systemBulletin/uploadImg`,
        timeout: 5 * 1000, // 5s
        // fieldName 要与接口规定的Form Data文件字段名一致
        fieldName: 'img',
        maxFileSize: 10 * 1024 * 1024, // 10M
        // 若接口返回的数据结构与官方规定的不一致, 则需要 customInsert 方法将返回的路径传给编辑器
        customInsert(res, insertFn) {
          const url = res.data
          insertFn(url)
        },
      },
    },
  },

注:
返回的图片路径必须是绝对路径, 在上传成功后，可在地址栏中通过本地地址加上绝对路径测试是否能够访问到图片。（一般需要配置代理转发）

图片上传的一些事件回调函数

如果需要在上传时做一些额外操作, 则可能用到以下的方法, 写在 editorConfig.MENU_CONF.uploadImage 当中

 onBeforeUpload(file) {
   return file // will upload this file
   // return false // prevent upload
 },
 onProgress(progress) {
   console.log('onProgress', progress)
 },
 onSuccess(file, res) {
   console.log('onSuccess', file, res)
 },
 onFailed(file, res) {
   alert(res.message)
   console.log('onFailed', file, res)
 },
 onError(file, err, res) {
   alert(err.message)
   console.error('onError', file, err, res)
 },

使用过程中遇到的一些问题

1.编辑器内容初始化失败

在 onCreated 里调用 setHtml 初始化编辑器内容, 却失败了。

由于初始内容是需要调接口去后台拿的数据，很有可能组件渲染时，数据还没回来，这就造成传进组件里的数据为空，故无法初始化成功。

解决的思路是用 v-if 来确保当数据存在时再渲染组件。

2.图片的链接可能会导致保存数据的接口报错(如下), 可以用 js-base64 把内容加密, 数据拿回来再解密即可.