quill-editor富文本改变覆盖原来自定义视频上传？

import "quill/dist/quill.snow.css";
import "quill/dist/quill.core.css";
import 'quill/dist/quill.bubble.css'
import Quill from "quill";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
import  ImageResize  from 'quill-image-resize-module';
var fonts = ['Microsoft-YaHei','SimSun', 'SimHei','KaiTi',];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单

这有一些副本要用到引入得一些东西 图片 或者视频
上节说到基础得富文本怎么实现 这一节就说说富文本视频怎么实现

//视频
const BlockEmbed = Quill.import('blots/block/embed')
class VideoBlot extends BlockEmbed {
    static create(value) {
    let node = super.create()
    node.setAttribute('src', value.url)
    node.setAttribute('controls', value.controls)
    node.setAttribute('width', value.width)
    node.setAttribute('height', value.height)
    node.setAttribute('webkit-playsinline', true)
    node.setAttribute('playsinline', true)
    node.setAttribute('x5-playsinline', true)
    return node;
}
static value(node) {
    return {
        url: node.getAttribute('src'),
        controls: node.getAttribute('controls'),
        width: node.getAttribute('width'),
        height: node.getAttribute('height')
        };
    }
}

VideoBlot.blotName = 'video'
VideoBlot.tagName = 'video'
Quill.register(VideoBlot)

这是所需要得js代码

// 点击视频按钮让原有的东西消失
var toolbarOptions = {
  // 点击视频改变原有样式出现弹框
    video: function (value) {
        if (value) {
        vm.uploadvideo = true;
        }
    },
  // 点击图片改变原有样式出现弹框
    image: function (value) {
        if (value) {
        vm.uploadimage = true;
        // 触发input框选择图片文件
        // document.querySelector('.img-uploader input').click()
        } else {
        this.quill.format('image', false);
        }
    },
    // 点击上传文件改变原有样式出现弹框
    upload: function (value) {
        if (value) {
            vm.uploadenclosure = true;
        }
    },
};

这些代码是我要改变原有得技术 自己新写入得弹框
先看 第一部分视频！

  editorOption: {
                placeholder: "请输入...",
                modules: {
                    toolbar: {
                        container: [
                            ["bold", "italic", "underline", "strike"], // toggled buttons
                            // ["blockquote", "code-block"],
                            ["clean"],
                           
                            [{ color: [] }, { background: [] }],
                            // [{ list: "ordered" }, { list: "bullet" }],
                            [{"font":fonts}],
                            [{ header: [1, 2, 3, 4, 5, 6, false] }],
                            [{ size:  ['10px','11px','12px', false, '16px' ,'18px','20px', '24px','36px']}],
                            [{ align: [] }],
                            ["image", "link", "video",'upload'],
                            // ["upload"],
                            ],
                        // 视频图片改变原有状态 hadlers
                        handlers: toolbarOptions,
                    },
                    imageResize:{
                        // modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
                    },
                },
                theme: "snow",
            },

然后在这个控制工具栏这里 加一段代码 handlers: toolbarOptions, 就是上面控制视频按钮得那个代码

    <!-- 插入视频弹框 -->
        <Modal
        v-model="uploadvideo"
        :mask-closable="false"
        title="视频上传"
        @on-ok="addVideoLink"
        >
            <Tabs value="name1">
                <Tab-pane label="插入视频" name="name1">
                    <div class="videotable">
                        <p>
                        <span>友情提示:</span>
                        网页渠道支持视频播放格式:mp4,ogg
                        </p>
                    </div>
                    <div class="videonavtion" style="margin-bottom:30px;margin-top:10px">
                        <span>视频网址:</span>
                        <Input v-model="videoValue" placeholder="请输入视频地址" />
                    </div>
                </Tab-pane>
                <Tab-pane label="上传视频" name="name2">
                    <IviewUpload ref="videoUpload" :format="['mp4','ogg']" @on-change="handleVideoSuccess"></IviewUpload>
                </Tab-pane>
            </Tabs>
        </Modal>

这个是我自己写的插入视频得弹框
第一个是上传网上得视频 第二个是上传本地视频

 // 外部视频引入
        addVideoLink() {
            const quill = this.$refs.myTextEditor.quill;
            //视频插入在富文本中的位置
            console.log(111,this.videoValue)
            let urls = [];
            if(this.videoValue){
                urls.push(this.videoValue);
                this.videoValue = '';
            }
            urls = urls.concat(this.videoList);
            this.videoList.length = 0;
            urls.forEach(item=>{
                let range = this.$refs.myTextEditor.quill.selection.savedRange;
                let index = 0;
                // 获取光标所在位置
                //当编辑器中没有输入文本时，这里获取到的 range 为 null
                if (range && range.index) {
                    index = range.index;
                }
                console.log(111,range,'-',index,'-',item)
                // 图片 
                //Quill自定义插入视频video实例 https://www.cnblogs.com/ZweiZhao/p/13390927.html
                quill.insertEmbed(
                    index,
                    "video",
                    {url:item,
                    controls:'controls',
                    width:'100%',
                    height:'100%'}
                );
                // 调整光标到最后
                quill.setSelection(index + 1);
            })
            this.$refs.videoUpload.clearFile();
        },

       //本地视频上传成功回调
        handleVideoSuccess(obj) {
            this.videoList = obj.urls;
        },

.iframe-warp{
    width:auto;
    height:auto
}
.iframe-warp.active-iframe-warp{
    width:570px;
    height:360px;
}
.videotable {
    width: 100%;
    height: 40px;
    line-height: 40px;
    // background-color: #edb010;
    opacity: 0.8;
    border-radius: 5px;
    p {
        font-size: 14px;
    }
    span {
        font-weight: bold;
    }
}
.videonavtion {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    span {
        color: #4a99ec;
        font-weight: bold;
        width: 80px;
        line-height: 30px;
    }
}
.upload-list{
    // display: inline-block;
    width: 120px;
    height: 120px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    // overflow: hidden;
    background: #fff;
    position: relative;
    border:1px solid #DCDEE2;
    margin-right: 20px;
    line-height: 120px;
    float: left;
    margin-bottom: 10px;
}
.upload-list-file{
    margin-right: 4px;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    overflow: hidden;
    border: 1px solid;
}
.upload-list img,.upload-list  progress{
    width: 100%;
    height: 100%;
}
.iframe{
    width: 100%;
    height: 100%;
    overflow: auto;
}

    mounted(){       
        vm = this;
        this.uploadList = this.$refs.upload.fileList;
        this.kosptes();
        console.log('swwwwww',this.$refs.myTextEditor.quill)
        this.answer = this.value
        this.$refs.myTextEditor.quill.setContents(this.answer)
        this.$refs.myTextEditor.quill.on('text-change', () => {
            this.$emit('input', this.answer)
        });
    },