富文本编辑器quill上传图片与视频

insertEmbed(index: Number, type: String, value: any, source: String = ‘api‘): Delta

quill.insertEmbed(10, ‘image‘, ‘https://quilljs.com/images/cloud.png‘)

const range = quill.getSelection();

<template>
  <div>
    <div id="toolbar">
      <span class="ql-formats">
        <button class="ql-image"></button>
        <button class="ql-video"></button>
      </span>
    </div>
    <div id="editor">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br></p>
    </div>
    <input id="uploadImg" type="file" style="display:none" accept="image/png, image/jpeg, image/gif" @change="uploadImage">
  </div>
</template>

this.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler)

    uploadImageHandler () 
      const input = document.querySelector(‘#uploadImg‘)
      input.value = ‘‘
      input.click()
    ,

  async uploadImage (event) 
      const form = new FormData()
      form.append(‘upload_file‘, event.target.files[0])
      const url = await $.ajax(...)  #上传图片 获取地址
      const addImageRange = this.quill.getSelection()
      const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
      this.quill.insertEmbed(newRange, ‘image‘, url)
      this.quill.setSelection(1 + newRange)
    

<template>
  <div>
    <div id="toolbar">
      <span class="ql-formats">
        <button class="ql-image"></button>
        <button class="ql-video"></button>
      </span>
    </div>
    <div id="editor">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br></p>
    </div>
    <input id="uploadImg" type="file" style="display:none" accept="image/png, image/jpeg, image/gif" @change="uploadImage">
  </div>
</template>

<script>
import Quill from ‘quill‘

export default 
  name: "QuillEditor",
  mounted () 
    this.initQuill()
  ,
  beforeDestroy () 
    this.quill = null
    delete this.quill
  ,
  methods: 
    initQuill () 
      const quill = new Quill(‘#editor‘, 
        theme: ‘snow‘,
        modules: 
          toolbar: ‘#toolbar‘
        
      )
      this.quill = quill
      this.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler)
    ,
    uploadImageHandler () 
      const input = document.querySelector(‘#uploadImg‘)
      input.value = ‘‘
      input.click()
    ,
    async uploadImage (event) 
      const form = new FormData()
      form.append(‘upload_file‘, event.target.files[0])
      const url = await $.ajax(...)
      const addImageRange = this.quill.getSelection()
      const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
      this.quill.insertEmbed(newRange, ‘image‘, url)
      this.quill.setSelection(1 + newRange)
    
  

</script>

<input id="uploadVideo" type="file" style="display:none" accept="video/*" @change="uploadVideo">

this.quill.getModule("toolbar").addHandler("video", this.uploadVideoHandler)

uploadVideoHandler () ...

async uploadVideo (event) ...

const BlockEmbed = Quill.import(‘blots/block/embed‘)
class VideoBlot extends BlockEmbed 
  static create (value) 
    let node = super.create()
    node.setAttribute(‘src‘, value.url)
    node.setAttribute(‘controls‘, value.controls)
    node.setAttribute(‘width‘, value.width)
    node.setAttribute(‘height‘, value.height)
    node.setAttribute(‘webkit-playsinline‘, true)
    node.setAttribute(‘playsinline‘, true)
    node.setAttribute(‘x5-playsinline‘, true)
    return node;
  

  static value (node) 
    return 
      url: node.getAttribute(‘src‘),
      controls: node.getAttribute(‘controls‘),
      width: node.getAttribute(‘width‘),
      height: node.getAttribute(‘height‘)
    ;
  

VideoBlot.blotName = ‘simpleVideo‘
VideoBlot.tagName = ‘video‘
Quill.register(VideoBlot)

      this.quill.insertEmbed(newRange, ‘simpleVideo‘, 
        url,
        controls: ‘controls‘,
        width: ‘100%‘,
        height: ‘100%‘
      )

<video src="...mp4" controls="controls" width="100%" height="100%" webkit-playsinline="true" playsinline="true" x5-playsinline="true"></video>