原理：
1、监听quill富文本编辑器图片点击事件
2、新建一个辅佐上传输入框并隐蔽 <input type = “file” id=”myupload” @change=”uploadImg” v-show=”false” />
3、当单机quill增添图片的时刻触发辅佐文件输入框翻开文件上传窗口，如许就可以够猎取到File对象，在上传的时刻运用
4、七牛上传须要 file, key, token（从背景猎取)。上传胜利今后，会返回一个对象，{hash: ”, key: ”}我们须要拼接图片地点然后显现到quill中。图片地点 七牛上传地点+key
**
下面代码就可以够修改quill中的图片地点

let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插进去图片  res.info为服务器返回的图片地点
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 调解光标到最后
          quill.setSelection(length + 1)

**

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!--辅佐-->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <!--这里用的是elementui的上传辅佐，实在和input type="file"是一样的都是为了猎取File对象-->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定义编辑器的事变条
export default {
  components: {
    quillEditor
  },
  mounted () {
    // 这里是从背景接口猎取的七牛上传所须要的token
    this.$store.dispatch('uploadToken')
    // 东西栏中的图片图标被单击的时刻调用这个要领翻开上传窗口
    let imgHandler = function (state) {
      if (state) {
        document.querySelector('.avatar-uploader input').click()
      }
    }
    // 当东西栏中的图片图标被单击的时刻
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },

下面是封装组件的代码 QuillEditorQiniu.vue

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!--辅佐-->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定义编辑器的事变条
export default {
  components: {
    quillEditor
  },
  mounted () {
    this.$store.dispatch('uploadToken')
    // 东西栏中的图片图标被单击的时刻调用这个要领
    let imgHandler = function (state) {
      if (state) {
        document.querySelector('.avatar-uploader input').click()
      }
    }
    // 当东西栏中的图片图标被单击的时刻
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      }
    }
  },
  methods: {
    onEditorChange (event) {
      console.log(event, 'change')
      this.$emit('getEditorInfo', event)
    },
    beforeUpload (request, file) {
      var observable = qiniu.upload(request, request.name, this.$store.state.upload_token)
      observable.subscribe({
        next (res) {
          console.log(res, 'r')
        },
        error (error) {
          console.log(error)
        },
        complete: (complete) => {
          console.log(complete, 'c')
          let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插进去图片  res.info为服务器返回的图片地点
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 调解光标到最后
          quill.setSelection(length + 1)
        }
      })
    },
    // 上传图片胜利
    uploadSuccess (res, file) {
      // file 返回的文件信息，也能够在这里调用七牛上传。
      console.log(file, 'success')
    },
    // 上传图片败北
    uploadError (res, file) {
      console.log(res, file, 'error')
    }
  }
}
</script>

<style scoped>
</style>