vue-quill-editor自定义标签使用

当我们使用vue-quill-editor时(quill也一样)，需要添加插入音频和视频资源，这时我们可以自定义video和auido标签，动态赋值并使用

 

话不多说，立即上代码

 

引入

import { Quill, quillEditor } from 'vue-quill-editor'

 

自定义类

const BlockEmbed = Quill.import('blots/block/embed')
// 添加插入视频
class VideoBlot extends BlockEmbed {
  static create(value) {
    const node = super.create()
    node.setAttribute('src', value.url)
    node.setAttribute('title', value.name)
    node.setAttribute('controls', value.controls)
    node.setAttribute('controlslist', value.controlslist)
    node.setAttribute('width', value.width)
    node.setAttribute('height', value.height)
    node.setAttribute('webkit-playsinline', true)
    node.setAttribute('playsinline', true)
    node.setAttribute('x5-playsinline', true)
    if (value.autoplay) {
      node.setAttribute('autoplay', value.autoplay)
    }
    return node
  }

  static value(node) {
    return {
      url: node.getAttribute('src'), // 注意这里和上面的属性和值反过来相对
      name: node.getAttribute('title'),
      autoplay: node.getAttribute('autoplay'),
      controls: node.getAttribute('controls'),
      controlslist: node.getAttribute('controlslist'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
    }
  }
}

VideoBlot.blotName = 'video' //quill使用时的名称
VideoBlot.tagName = 'video' //定义的html标签名
Quill.register(VideoBlot) // 注册

 

使用

const newaudio = {
  url: file_response.data.url,
  autoplay: this.audio.autoplay,
  controls: 'controls',
  controlslist: this.audio.controlslist,
  width: this.audio.width ? this.audio.width + 'px' : '100%',
  height: this.audio.height ? this.audio.height + 'px' : '100%',
}

const quill = this.$refs.myQuillEditor.quill
// 获取光标所在位置
const length = quill.selection.savedRange.index
// 插入video
quill.insertEmbed(length, 'video', newvideo) // 'video'即为上面定义的blotName
// 调整光标到最后
quill.setSelection(length + 1)

 

你也可以自定义其他标签，如audio，img等等，方法一样