使用方法

不管vue-quill-editor对接的是那个UI框架，还是全部自己写，其实使用方法都是一样的。

• 首先都是先能将文件上传至七牛
• 然后针对vue-quill-editor开发handlers方法，触发上传功能，拿到回调值，insert进入富文本。

获取七牛token上传

region: 上传区域，可以设置为undefined
具体参数解释说明 参考文档，原文文档写得比较详细。

// 上传图片typescript
import { getQNToken } from '@/assets/api/QiNiu' // 已经写好的请求token接口
const qiniu = require('qiniu-js')

const QNUpload = (file: any, prefix: string, name: string, next) => {
  return new Promise(async (resolve, reject) => {
    const putExtra = {
      fname: name,
      params: {},
      mimeType: null
    }
    const config = {
      useCdnDomain: false // 是否使用 cdn 加速域名
    }
    // 接口getQNToken会缓存token到sessionStorage，发现没有重新请求
    const token = sessionStorage.getItem('QNToken') || await getQNToken(***) // 获取token
    const n = name.replace('.', '_' + new Date().getTime() + '.')   // 重新命名
    const key = prefix ? (prefix + '/' + n) : n // 加上传过来的前缀
    const observable = qiniu.upload(file, key, token, putExtra, config) // 使用SDK方式发起请求
    // next 是一个回调函数
    observable.subscribe(next, (error) => {
      reject(error)
    }, (complete) => {
      resolve(complete)
    })
  })
}

export default QNUpload

base64 to blob二进制

/**
 * base64  to blob二进制
 * @param {*} dataURI:string
 */
const dataURItoBlob = (dataURI) => {
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
  const byteString = atob(dataURI.split(',')[1])
  const arrayBuffer = new ArrayBuffer(byteString.length)
  const intArray = new Uint8Array(arrayBuffer)

  for (let i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i)
  }
  return new Blob([intArray], { type: mimeString })
}

上传文件组件

<template>
  <div class="upload">
    <Icon type="md-add" />
    <span v-show="width>0">{{width}} * {{height}}</span>
    <input type="file" @change="uploadFile" :accept="mimeType"/>
    <div class="progress" v-show="percent && percent !== 100">
      <Progress :percent="percent" hide-info />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit, Prop } from 'vue-property-decorator'
import { dataURItoBlob } from '@/assets/common'
import QNUpload from '@/assets/api/upload'

interface QNReceive {
  type: string,
  data: object
}

@Component
export default class Upload extends Vue {
  // 上传路径前缀
  @Prop(String) readonly prefix!: string
  @Prop(String) readonly field!: string
  // 控制文件上传大小
  @Prop({ default: 1024 }) readonly size!: number
  // 设置提示图尺寸
  @Prop({ default: 200 }) readonly width!: number
  @Prop({ default: 200 }) readonly height!: number
  // 组件层控制上传类型，默认是图片
  @Prop({ default: 'image/png, image/jpeg, image/gif, image/jpg' }) readonly mimeType!: string
  // 已上传图片大小占比
  percent:number = 0

  @Emit()
  uploadFile (e) {
    const files = e.target.files
    if (!files.length) return
    let keys: Array<any> = []
    for (let i = 0, len = files.length; i < len; i++) {
      const file = files[i]
      const size = this.size
      // 大小验证
      if (/image/g.test(file.type) && file.size / 1024 > size) {
        this.$Message.info({ content: file.name + '大小不能超过' + size + 'KB', duration: 5 })
        continue
      }
      // 读取文件转blob
      const reader = new FileReader()
      reader.addEventListener('load', (data: any) => {
        const dataURI = data.target.result
        const blob = dataURItoBlob(dataURI)
        const name = file.name
        const prefix = this.prefix
        // 调取上传方法
        QNUpload(blob, prefix, name, (next) => {
          // 上传进度
          this.percent = next.total.percent
        }).then((data) => {
          this.$emit('completeUpload', Object.assign(data, { field: this.field }))
        }).catch(error => {
          console.log(error)
        })
      })
      reader.readAsDataURL(file)
    }
  }
}
</script>

<style lang="scss">
.upload {
  width: 100%;
  height: 80px;
  position: relative;
  border: 1px dashed #cccccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  i {
    font-size: 40px;
    cursor: pointer;
  }
  .progress {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 20px;
  }
  span {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: $grayColor;
    text-align: center;
    font-weight: bold;
  }
}
</style>

vue-quill-editor富文本添加上传图片

使用组件的方式加载富文本，配置toolbar，添加handlers处理方法。最后完成插入图片
这里只配置了一张一张图片上传，稍微改一下，添加multiple="true"，就可以选中多个文件上传

<template>
  <div>
    <quill-editor style="height: 800px;" ref="myQuillEditor" v-model="Qcontent" :options="editorOption"></quill-editor>
    <v-upload ref="upload" v-show="false" @completeUpload="getCompleteUpload" prefix="goodsDetail"></v-upload>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit, PropSync, Prop, Watch } from 'vue-property-decorator'
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 VUpload from '@/components/Upload.vue'

@Component({
  components: {
    quillEditor,
    VUpload
  }
})
export default class QuillEditor extends Vue {
  @PropSync('content', { default: '' }) readonly Qcontent?: string
  @Prop({ default: false }) readonly sendContent?: Boolean

  @Watch('sendContent')
  onSendContentChanged(val: boolean, oldVal: boolean) {
    if (val) {
      this.$emit('getContent', this.Quill.container.innerHTML)
    }
  }
  QNHost = ****
  Quill:any = ''
  addRange: any = ''
  uploadType = ''
  editorOption = {
    modules: {
      toolbar: {
        container: [
          ['bold', 'italic', 'underline'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'indent': '-1' }, { 'indent': '+1' }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          [{ 'color': [] }],
          [{ 'font': [] }],
          [{ 'align': [] }],
          ['clean'],
          // 新增image，使用自带的icon，添加新的handlers
          ['image']
        ],
        handlers: {
          // 点击 image会调取方法imgHandler
          image: this.imgHandler
        }
      }
    }
  }

  mounted () {
    this.imgHandler()
  }

  @Emit()
  imgHandler () {
    const Quill: any = (this.$refs.myQuillEditor as Vue & {quill: () => any}).quill
    this.Quill = Quill
    const toolbar = Quill.getModule('toolbar')
    const upload: any = this.$refs.upload

    toolbar.addHandler('image', () => {
      // 获取当前鼠标位置
      this.addRange = Quill.getSelection()
      // 触发上传，可以单独写input直接触发，这里使用封装的组件
      upload.$el.getElementsByTagName('input')[0].click()
    })
  }

  @Emit()
  getCompleteUpload (data) {
    const index = this.addRange.index || 0
    // 上传成功拿到返回值，插入富文本
    this.Quill.insertEmbed(index, 'image', this.QNHost + data.key)
  }
}
</script>

总结

quill-editor 开发扩展还是很好开发的。
一直有个疑问就是：quill-editor自己整了一套数据接口delta，通过quill.getContents()获取到delta，这个delta怎么展示在没有引入这个包的界面上？
现在我的办法是：直接获取container的innerHTML
不知还有更好的办法没？