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

自定义富文本编辑器组件实现这种效果

 在网上找了很多大佬的例子 比如这位大佬他是用图片来实现下标功能一共有十张图片，这样就被图片限制住了，图片的数量决定你下标的数量，但是我感觉一个填空题10个下标也足够了。
https://www.cnblogs.com/legu/p/4778513.html

下面代码的思路：
    一开始想着用图片来充当下标，但是由于需求要求不得已放弃了这种方法，这种方法有一个弊端就是如果你把图片保存在前端某个文件夹下，由于图片已经渲染到页面上了你去修改src的路径会导致找不到，所以这时候你需要一个网上的地址，比如说放在gitee里面然后去访问这样能解决这个问题。
    后来发现直接往富文本输入框里面插入标签值在进行innerHTML操作会触发他的一个callback方法导致渲染失败。只有他支持的标签才不会清除，所以我利用<strong>标签(相当于富文本编辑器里面的下划线)来进行现实这样就能防止callback来导致渲染不上去。

    由于用的是<strong>标签所以可能导致原本的下划线组件不能一起用，具体没测试过。

//组件代码

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

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

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

//method方法

mounted() {
	var that = this;
	setTimeout(() => {
		//给自定义的组件设置显示的文字icon
		document.getElementsByClassName("ql-0")[0].innerText = '__';
		//给自定义的组件添加点击事件
		document.getElementsByClassName("ql-0")[0].addEventListener('click', function () {
			that.clickInsertCompletionButton();
		})
	}, 100);
},
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("两个填空不能紧挨着")
    }
},

两个下标不能没有任何间隙挨在一起 会导致显示错误

//style样式

::v-deep .gapfilling-span {
        width: 17px;
        color: #000000;
        padding: 0px 20px;
        margin: 0px 5px;
        border-bottom: 1px solid #b6b6b6;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;
        -webkit-user-modify: read-only;
    }

我们肯定也会进行编辑操作 这时候就需要在回显值的时候进行样式赋值 不然下标只会显示数字。

                that.$nextTick(function () {
                    var datas = document.getElementsByTagName('strong')
                    for (let i = 0; i < datas.length; i++) {
                        document.getElementsByTagName('strong')[i].setAttribute('class','gapfilling-span')
                    }
                })