实现效果

文本编辑的三个功能分别是：添加链接，上传图片，上传文件
vue-quill-editor富文本编辑器的使用（实现图片/文件上传） - 图1

编辑器配置

基本配置

  1. <template>
  2.    <quill-editor class="editor" ref="QuillEditor" v-model="detail" :options="editorOption"></quill-editor>
  3. </template>
  1. <script>
  2. // 编辑器工具栏配置
  3. const toolbarOptions = [
  4.   ['link', 'image', 'upload']
  5. ]
  6. export default {
  7.     data() {
  8.       detail: '',
  9.       editorOption: {
  10.         modules: {
  11.           toolbar: {
  12.             container: toolbarOptions, // 工具栏
  13.             handlers: {
  14.               image: function(value) { //编辑器-上传图片
  15.                 if (value) {
  16.                   // 调用antd图片上传upload
  17.                   document.querySelector('.uploadImg .ant-upload .ant-btn').click()
  18.                 } else {
  19.                   this.quill.format('image', false)
  20.                 }
  21.               },
  22.               upload: value => { //编辑器-上传文件
  23.                 if (value) {
  24.                   document.querySelector('.uploadFile input').click()
  25.                 }
  26.               }
  27.             }
  28.           }
  29.         }
  30.       }
  31.     }
  32. }
  33. </script>

实现图片上传

想法：隐藏upload组件，当用户点击上传图片的icon时，触发upload的点击，调用上传图片接口，服务器返回图片地址后，添加到光标停留的地方

  1. <!--携带了头部header参数token-->
  2.  <a-upload
  3.    name="img"
  4.    :multiple="true"
  5.    :showUploadList="false"
  6.    :action="front"
  7.    :headers="{Authorization: 'bearer ' + userInfo.token}" 
  8.    class="uploadImg"
  9.    style="display: none"
  10.    @change="uploadImg"
  11.  >
  12.    <a-button>上传图片</a-button>
  13.  </a-upload>
  1. // 编辑器 - 上传图片
  2. uploadImg(info) {
  3.   let quill = this.$refs.QuillEditor.quill
  5.   if (info.file.status === 'uploading') {
  6.     return
  7.   }
  8.   if (info.file.status === 'done') {
  9.     if (info.file.response.errno === 0) {
  10.       // 获取光标所在位置
  11.       let length = quill.getSelection().index
  12.       // 插入图片，res为服务器返回的图片链接地址
  13.       quill.insertEmbed(length, 'image', info.file.response.data)
  14.       // 调整光标到最后
  15.       quill.setSelection(length + 1)
  16.     }
  17.   }
  18. }

实现文件上传

想法：同理，隐藏upload组件，当用户点击上传文件的icon时，触发upload的点击，调用上传文件接口，服务器返回文件地址后，添加到光标停留的地方；不过，这里要自定义一个文件的icon

  1. import { Quill } from 'vue-quill-editor'
  2. // 自定义插入a链接
  3. var Link = Quill.import('formats/link')
  4. class FileBlot extends Link {
  5.   // 继承Link Blot
  6.   static create(value) {
  7.     let node = undefined
  8.     if (value && !value.href) {
  9.       // 适应原本的Link Blot
  10.       node = super.create(value)
  11.     } else {
  12.       // 自定义Link Blot
  13.       node = super.create(value.href)
  14.       // node.setAttribute('download', value.innerText);  // 左键点击即下载
  15.       node.innerText = value.innerText
  16.       node.download = value.innerText
  17.     }
  18.     return node
  19.   }
  20. }
  21. FileBlot.blotName = 'link'
  22. FileBlot.tagName = 'A'
  23. Quill.register(FileBlot)

注意这里 - 插入文件地址的方式

  1. // 编辑器 - 上传文件
  2. uploadFile(info) {
  3.    let quill = this.$refs.QuillEditor.quill
  5.    if (info.file.status === 'uploading') {
  6.      return
  7.    }
  8.    if (info.file.status === 'done') {
  9.      if (info.file.response.errno === 0) {
  10.        // 获取光标所在位置
  11.        let length = quill.getSelection().index
  12.        // 插入文件，res为服务器返回的文件链接地址
  13.        quill.insertEmbed(length, 'link', {href: info.file.response.data, innerText: info.file.name}) //**注意这里 - 插入文件地址的方式**
  14.        // 调整光标到最后
  15.        quill.setSelection(length + 1)
  16.      }
  17.    }
  18.  }

最后的效果图：
vue-quill-editor富文本编辑器的使用（实现图片/文件上传） - 图2
点击文件链接，直接下载这个文件