vue-quill-editor 复用 插入图片未知错误

///https://b3log.org/vditor/ 秀

动态传入ref
props加

myEditor: {
   type: String,
   default: "myQuillEditor",
 },
//上传按钮是第几个 在配置中更方便找到标签
quillIndex: {
  type: Number,
  default: 0,
},

在editor的配置中要注意

      editorOption: {
        // some quill options
        placeholder: this.placeholder,
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                //通过css获取元素 获取到所有的元素后通过传入的下标确定是第几个元素
                  document
                    .querySelectorAll(".avatar-uploader input")
                    [this_.quillIndex].click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },

特别注意 image点击事件 用querySelectorAll获取

image: function (value) {
                if (value) {
                  document
                    .querySelectorAll(".avatar-uploader input")
                    [this_.quillIndex].click();//获取置顶标签
                } else {
                  this.quill.format("image", false);
                }
              },

图片上传成功后的方法

//通过动态传入的myEditor获取该ref的editor标签
const quill = this.$refs[this.myEditor].quill;
// 获取光标所在位置
length = quill.getSelection().index;
// 插入图片
quill.insertEmbed(length, "image", res.resultData.fileLink);
// 调整光标到最后
quill.setSelection(length + 1);

封装好的组件