<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("两个填空不能紧挨着")
}
}