vue element ui项目里使用quill-editor修改Quill内置的video blot，用video标签替换iframe

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


可以清楚的看到iframe标签读取的是乱码的形式，而video却可以正常显示

参考了quill的源码，直接拷贝video.js模块后修改，在vue工程目录下创建quill文件夹及文件：.\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标签替换iframeexport default Video

vue组件中引入quill

import * as Quill from ‘quill’
// 这里引入修改过的video模块并注册
import Video from ‘./video’
Quill.register(Video, true)

就可以在富文本中使用video标签显示视频了