vue-quill-editor富文本编辑器自定义上传图片功能

问题描述：vue-quill-editor富文本默认上传图片是将图片转换成base64进行存储，字段过长；然后进行自定义上传图片，只保存图片路径，减少服务器压力
解决思路：
1、先创建一个上传图片的组件（我使用的是element-ui的el-upload），将该组件进行隐藏
2、点击富文本插入图片的按钮时转换成点击上传插件，进行图片上传
3、上传成功后后端返回图片路径，将图片路径处理后插入到光标在富文本中的位置
解决步骤：
1、组件添加，隐藏该组件

     <el-upload
        style="display: none"
        action="你上传图片的接口地址"
        list-type="picture-card"
        :on-success="uploadSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload> 

2、点击插入图片时进行上传图片插件点击操作，主要是handlers里面的内容

editorOption: {
        placeholder: "请输入...",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              [{ color: [] }, { background: [] }],
              ["link", "image"],
              ["blockquote", "code-block"],
              [{ align: [] }],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }],
              [{ header: 1 }, { header: 2 }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ size: ["small", false, "large", "huge"] }],
              [{ font: [] }],
              [{ indent: "-1" }, { indent: "+1" }],
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用iview图片上传
                  //console.log(value);
                  document
                    .querySelector(".el-upload.el-upload--picture-card")
                    .click();
                } else {
                  // this.quill.format("image", false);
                }
              },
            },
          },
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },

3、根据图片给上传成功后返回的路径进行路径处理

// 上传成功
    uploadSuccess(res) {
    //我这里返回的是图片路径，没有加域名，处理一下即可
      let url = "服务器域名" + res.message;

      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片
        quill.insertEmbed(length, "image", url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        // 提示信息，需引入Message
        this.$message({
          type: "error",
          message: "图片插入失败",
        });
      }
    },