vue项目里修改Quill内置的video blot，用video标签替换iframe

转自weixin_43587992的博客

vue项目里修改Quill内置的video blot，用video标签替换iframe
既然搜到这了，quill的基本安装使用就不多说了，quill内置的video模块是使用iframe标签，用视频网站上视频分享连接没问题的，因为项目上用服务器本地的MP4视频，本来iframe的src直接指.mp4文件也是可以的，其他浏览器都可以，但是还有个感人的IE，iframe里直接指向.mp4时IE会变成下载，只好把iframe改成H5原生的video标签

参考了quill的源码，直接拷贝video.js模块后修改，在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 `${video}`
  }
}
Video.blotName = 'video' // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe

export default Video

vue组件中引入quill

.ql-editor .ql-video {
  width: 640px;
  height: 480px;
}
.ql-size-small {
  font-size: 0.8rem;
}
.ql-size-normal {
  font-size: 1rem;
}
.ql-size-large {
  font-size: 1.2rem;
}
.ql-size-huge {
  font-size: 1.5rem;
  font-weight: bold;
}

————————————————
版权声明：本文为CSDN博主「bm.lee」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43587992/article/details/86296105