vue-quill-editor富文本编辑器视频上传iframe转video

对vue-quill-editor部分源码重写

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' 
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe

export default Video

选择完视频

            // 视频选择完成按钮
            addVideoLink() {
                if (this.videoLink.length == 0) {
                    alert('请输入视频链接');
                }
                //当编辑器中没有输入文本时，这里获取到的 range 为 null
                var range = this.$refs.myQuillEditor.quill.getSelection();
                //视频插入在富文本中的位置
                var index = 0;
                if (range == null) {
                    index = 0;
                } else {
                    index = range.index;
                }
                //隐藏弹框
                this.videoUploadTag = false;
                //将视频链接插入到当前的富文本当中
                this.$refs.myQuillEditor.quill.insertEmbed(index, 'video', this.videoLink);
            }