vue项目里修改vue-quill-editor中插入视频，用video标签替换iframe

项目场景：

vue-quill-editor是常用的富文本编辑器插件，内置的video模块是使用iframe标签，但是目前遇到的问题的是竖屏的视频不能正确的展示，要设置iframe内的video宽高为100%才行，所以想要video标签来替换iframe。

问题描述：

视频控件不能完整展示,video标签的宽高设为100%之后也不能满足需求，查了资料之后决定采用video标签。

解决方案：

首先在vue工程目录下创建quill文件夹及文件：src/quill/video.js

import { Quill } from "vue-quill-editor";
// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class Video extends BlockEmbed {
  static create(value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls')
    node.setAttribute('type', 'video/mp4')
    node.setAttribute('src', this.sanitize(value))
    return node
  }

  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }

  static sanitize(url) {
    return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
  }

  static value(domNode) {
    return domNode.getAttribute('src')
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }

  html() {
    const { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video' // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe

export default Video

然后在vue文件中引入quill

到这一步基本也就实现了，总结的话就是分为三步：
1.新建一个quill/video.js
2.vue文件中引入video.js
3.quill注册引入的video模块
使用方法还是和原来的一样，弹出url输入框时输入MP4文件的url地址就可以了