vue-quill-editor如何自定义图片上传并且给图片添加

• 首先，在模板中写入一个element-ui的上传插件,设为display:none;，将它隐藏，并且将按钮设置个id，到时候用dom操作触发点击事件

<template>
    <el-upload
      class="upload-demo"
      :headers="myHeaders"
      style="display: none;"
      :action=""
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :file-list="fileList">
      <button id="article-uploader" @click.prevent="">+ 上传已有验厂报告</button>
    </el-upload>
    <quill-editor v-model="queryList.content"
                  ref="myQuillEditor"
                  id="myQuillEditor"
                  :options="editorOption">
    </quill-editor>
</template>

• 先注册一个工具栏的常量，在data中注册富文本插件的配置项，对上传图片的事件进行拦截，触发element-ui上传图片的点击事件即可，至于图片上传的调用接口请根据自己的实际项目需要自行写入。

const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction

    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],

    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['link', 'image', 'video'],
    ['clean']                                         // remove formatting button
];

data(){
  return{
    editorOption: {
        modules: {
            toolbar:{
                container: toolbarOptions,
                handlers: {
                    'image':function (value) {
                        if (value) {
                            document.querySelector('#article-uploader').click();     //这里就是点击上传图片按钮会触发的事件，然后，你这里直接触发我们饿了么上传图片的按钮点击
                        }else {
                            this.quill.format('image', false);
                        }
                    }
                }
            }
        },
    },
  }
}

• 接下来就是对插入成功以后图片的写入，以及对img标签的属性新增alt属性的实现，width，height等属性也可以按照这个方式自行写入。首先引入插件，然后对上传图片的配置项进行重写，再将新配置好的类进行注册，在上传成功的回调中写入图片，并且将光标移动到图片的后面，即可完成

  import Quill from 'vue-quill-editor'

  let BlockEmbed = Quill.Quill.imports['blots/embed'];
  class ImageBlot extends BlockEmbed {
      static create(value) {
          let node = super.create();
          node.setAttribute('src', value.src);
          node.setAttribute('alt', value.alt);
          return node;
      }

      static value(node) {
          return {
              src: node.getAttribute('src'),
              alt: node.getAttribute('alt')
          }
      }
  }
  ImageBlot.blotName = 'image';
  ImageBlot.tagName = 'img';
  Quill.Quill.register(ImageBlot);
  
  methods:{
    uploadSuccess(res){
      let quill=this.$refs.myQuillEditor.quill;
      quill.insertEmbed(length, 'image',{src:this.imgUrl + res.result.url,alt:res.result.id});
      let length = quill.getLength();
      quill.setSelection(length +1);
    },
  }