富文本编辑器—基于vue-quill-editor二次封装，实现自定义图片上传功能

vue-quill-editor是一个很流行的富文本编辑器，
github地址：https://github.com/surmon-china/vue-quill-editor
官网：https://www.npmjs.com/package/vue-quill-editor
在vue中如何使用，官网已经描述的很详细了，在此就不多做赘述。

问题背景：因为vue-quill-editor是将图片转为base64编码，然后post请求，写入数据库。然鹅，项目中不允许这种数据直接入库，需要将图片上传到file sevice,拿到图片的额url, 然后将url作为富文本内容入库。

思路：页面中掩藏一个element的文件上传组件，当点击图片上传的时候，调用element的文件上传，上传成功后在富文本中显示图片。
html:

<template>
  <div>
    <quill-editor
      v-model="content"
      :options="editorOption"
      ref="quillRef"
      @change="onEditorUpdate"
      v-dataChange
    >
    </quill-editor>
    
	<!-- 隐藏元素 -->
    <el-upload
      ref="uploadRef"
      action="/xxx/xxx"
      :file-list="files"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="change"
      :on-success="handleUploadSuccess"
      v-bind="[$attrs]"
      accept=".jpg,.jpeg,.png"
    >
      <i slot="trigger" class="el-icon-picture"></i>
    </el-upload>
  </div>
</template>

css:

::v-deep .el-upload {
  height: 0;
  display: none;

  .el-icon-picture {
    display: none;
  }
}

js:

    const quillRef = ref(null); 
    const files = ref([]);
    const content = ref("");

    const editorOption = {
      placeholder: "请输入内容",
      modules: {
        toolbar: {
          container: toolbarOptions, // 工具栏
          handlers: { // 拦截默认操作
            image: function (value) {
              if (value) {
                // 调用图片上传
                document.querySelector(".el-upload .el-icon-picture").click();
              } else {
                quill.format("image", false);
              }
            },
          },
        },
      },
    };

   

    const onEditorUpdate = (val) => {
      emit("input", val.html);
    };

    const change = async (list) => {
      const formData = new FormData();
      formData.append("file", list.raw);
      formData.append("bucketName", "fe.inner");
      formData.append("fileName", list.name);
      await request({
        url: "/api/xxxx",
        method: "post",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      const url = `/api/platform/filesystem/download?xxxe=${list.name}`;
      const quill = quillRef.value.quill;
      // 获取光标所在位置
      const length = quill.getSelection().index; 
	  // 插入图片，url为服务器返回的图片链接地址
      quill.insertEmbed(length, "image", url);
      // 调整光标到最后
      quill.setSelection(length + 1);
    };

    const handleUploadSuccess = (res, file, fileList) => {
      if (!res || !res.data) {
        this.$message.error("服务器数据格式错误");
        this.$refs.upload.handleRemove(file);
        return false;
      }

      let data = res.data;
      for (let attr in data) {
        file[attr] = data[attr];
      }
      file.url = data.originAddress;
      file.time = res.time || Date.now();

      change(fileList);
    };

页面效果：

写入数据库的数据为：