vue中使用quill-image-extend-module实现在富文本vue-quill-editor中实现图片先上传到服务器，再将上传路径放在富文本中

import { quillEditor, Quill } from ‘vue-quill-editor‘
import { container, ImageExtend, QuillWatch } from ‘quill-image-extend-module‘
Quill.register(‘modules/ImageExtend‘, ImageExtend)

<quill-editor
      @change="onEditorBlur($event)"
      id="desc"
      ref="quill"
      v-model="desc"
      :options="editorOption"
    ></quill-editor>
     <input type="file" @change="change" id="upload" style="display:none;" />

editorOption: {
        placeholder: ‘此处输入赛事规程‘,
        modules: {
          ImageExtend: {
            loading: true,
            name: ‘img‘,
            action: UploadImage,//上传的服务器地址
            response: res => {
              return res.data
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector(‘#upload‘).click()----------------#upload即为自己写的上传，可以使用最简单的input
                } else {
                  this.quill.format(‘image‘, false)
                }
              }
            }
          }
        }
      },

  change(e) {
      let file = e.target.files[0]
      const formData = new FormData()
      formData.append(‘file‘, file)
------下面可以根据后端写的上传接口进行传递参数
      UploadImage(formData)
        .then(res => {
          let quill = this.$refs.quill.quill------------$ref中得到quill后再往下找quill,否则查找光标位置会报错。
          if (res.code === 0) {
            const formdata = _.extend({}, this.formdata)
            let length = quill.getSelection().index//光标位置
            // 插入图片  图片地址
            quill.insertEmbed(length, ‘image‘, res.data)
            // 调整光标到最后
            quill.setSelection(length + 1)//光标后移一位
          }
        })
        .catch(err => {
          console.error(err)
        })
    }