vue-quill-editor 自定义上传图片

Vue-Quill-Editor 是一个基于 Quill.js 的富文本编辑器，如果想要在编辑器中上传图片，可以自定义一个上传图片的方法。

首先，在 Vue-Quill-Editor 中定义一个上传图片的方法：

<template>
  <div ref="editor">
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  methods: {
    uploadImage(file) {
      const formData = new FormData()
      formData.append('file', file)
      // 发送请求上传文件
      // 返回图片地址
      return Promise.resolve('https://your-cdn.com/' + file.name)
    }
  }
}
</script>

然后在 `quill-editor` 组件上设置 `:custom-options` 属性，将上传图片的方法传递给 Quill.js：

<quill-editor
  ref="myQuillEditor"
  :custom-options="{
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ header: [1, 2, false] }],
        ['blockquote', 'code-block'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ indent: '-1' }, { indent: '+1' }],
        [{ direction: 'rtl' }],
        [{ size: ['small', false, 'large', 'huge'] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],
        ['clean'],
        ['link', 'image', 'video']
      ],
      imageDrop: true,
      imageResize: {},
      imageExtend: {
        loading: true,
        headers: { 'Authorization': 'Bearer ' + token },
        url: 'https://your-api.com/upload/image',
        method: 'POST',
        size: 2 * 1024 * 1024,
        compress: true,
        convertSize: 1080,
        format: 'image/jpeg',
        altKey: true,
        responseFn: response => {
          // 返回图片地址
          return 'https://your-cdn.com/' + response.data.url
        }
      }
    },
    placeholder: '请输入内容',
    theme: 'snow'
  }"
  @ready="onEditorReady"
></quill-editor>

这里主要是设置 `imageExtend` 属性，其中 `url` 属性为上传图片的接口地址， `responseFn` 为上传图片成功后返回的数据处理方法。

最后在 `uploadImage` 方法中发送请求上传图片，并返回图片地址即可。