vue-quill-editor自定义组件来实现填空题下标

<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption">
</quill-editor>

//data中绑定符文便编辑器菜单按钮

    completionOption: {
            index: 1
        },
        editorOption: {
        modules: {
            toolbar: {
                container: [
                        [
                            ['insertCompletion'],
                        ]
                    ],
                },
            },
        placeholder: "请输入",
        },

mounted

mounted() {
    var that = this;
    setTimeout(() => {
        //给自定义的组件设置显示的文字icon
        document.getElementsByClassName("ql-0")[0].innerText = '__';
        //给自定义的组件添加点击事件
        document.getElementsByClassName("ql-0")[0].addEventListener('click', function () {
            that.clickInsertCompletionButton();
        })
    }, 100);
}

methods

clickInsertCompletionButton() {
    var that = this;
    //判断最后是否以</strong>结尾
    var details = document.getElementsByClassName("ql-editor")[0].children[0].innerHTML
    var end = "";
    if (details.length >= 9) {
        end = details.substr(details.length - 9, details.length)
    }
    //不能两个下标紧挨着 这样会导致下标值显示错误
    if (end != '</strong>') {
        //重置判断 防止判断出现错误
        end = '';
        //在末端创建<strong>来显示下标
        var strong = document.createElement("strong");
        strong.innerText = that.completionOption.index;
        strong.className = 'gapfilling-span';
        document.getElementsByClassName("ql-editor")[0].children[0].appendChild(strong);
        //根据下标数量循环出指定数量的输入框
        var datas = document.getElementsByClassName("gapfilling-span");
        for (let i = 0; i < datas.length; i++) {
            document.getElementsByClassName("gapfilling-span")[i].innerText = (i + 1);
        }
        //记录下标
        that.completionOption.index = datas.length;
    } else {
        that.$message.warning("两个填空不能紧挨着")
    }
}