这应该是我做的quill自定义功能的最后一个了，我想要用到的功能就这3个。

做这个原因是因为quill默认插入视频是让用户直接输入对应的iframe地址，而我看了几个视频网站的分享都是人家配置好的iframe代码，你只用复制就行。所以如果是这样的话，我们就很难受了，每次都要手动从代码中把视频地址拿出来，烦。

<template>
    <div ref="editor"></div>
</template>

<script>
    export default {
        name: "editor",
        props: ['content'],
        data() {
            return {
                _content: '',
                videoIframe: ''
            }
        },
        watch: {
            //  监听父组件传递的content值，变化后更新富文本内容
            content(newVal, oldVal) {
                if (this.quill) {
                    if (newVal && newVal !== this._content) {
                        this._content = newVal;
                        this.quill.clipboard.dangerouslyPasteHTML(newVal);
                    } else if(!newVal) {
                        this.quill.setText('');
                    }
                }
            }
        },
        mounted() {
            //  初始化quill
            this.quill = new Quill(this.$refs.editor, {
                theme: 'snow',
                modules: {
                    history: {
                        userOnly: true
                    },
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                        ['link', 'image', 'video']
                    ],
                    syntax: true
                }
            });

            //  自定义插入视频
            toolbar.addHandler('video', () => {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.videoIframe,
                                autofocus: true,
                                placeholder: '复制视频插入代码'
                            },
                            on: {
                                input: (val) => {
                                    this.videoIframe = val;
                                }
                            }
                        })
                    },
                    okText: '插入视频',
                    onOk: () => {
                        this.quill.focus();
                        if( !/^<iframe.+<\/iframe>$/.test(this.videoIframe) ) {
                            this.videoIframe = '';
                            return;
                        }
                        var range = this.quill.getSelection();
                        if (range) {
                            //  在当前光标位置插入图片
                            toolbar.quill.clipboard.dangerouslyPasteHTML(range.index, this.videoIframe);
                            //  将光标移动到图片后面
                            toolbar.quill.setSelection(range.index + 1);
                        }
                        this.videoIframe = '';
                    },
                    onCancel: () => {
                        this.videoIframe = '';
                    }
                })
            });

            //  监听富文本变化，更新父组件数据
            this.quill.on('text-change', () => {
                let html = this.$refs.editor.children[0].innerHTML;
                if (html === '<p><br></p>') html = '';
                this._content = html;
                this.$emit('edit', this._content);
            });
        }
    }
</script>

<style>
    .ql-snow .ql-editor pre.ql-syntax {
        background-color: #282c34;
        color: #abb2bf;
    }
</style>

我用的ivew，所以这里顺便把插入视频的弹层换了。
我对插入的内容没有做过多处理，只做了一个iframe标签的匹配。
确实是懒，想做其他限制的朋友可以自己做。