vue2中使用富文本编辑器，由于业务需求是要求可以根据关键字的坐标去回显标红，如果后台没有处理的话，前端就需要根据坐标标红，但是后台处理了就不用了。
gitee地址：gitee.com/jeffka/vue-… 用这个插件控制台会有个报错， [Deprecation] Listener added for a ‘DOMNodeInserted’ mutation event. Support for this event type has been removed, and this event will no longer be fired. See for more information. 这个报错是quill的报错，因为这个插件已经不维护了，解决方法就是： 找到 quill.js
// 找到这行
_this.domNode.addEventListener('DOMNodeInserted', function () { });
// 修改为：
new MutationObserver(() => {}).observe(_this.domNode, { childList: true });
// 这样这个报错就解决了
// 安装 vue-quill-editor 或者直接在 package.json中写
"dependencies": {
"element-ui": "^2.15.14",
"quill": "^2.0.2",
"vue": "^2.6.11",
"vue-quill-editor": "^3.0.6"
},
main.js文件
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
// 在组件中使用
<template>
<div class="editor-box">
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
style="height: 102vh; overflow-y: hidden"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)"
></quill-editor>
<!-- 这块是选中关键字之后会显示添加标注，这个后续会完善，也可以自定义工具栏，添加自定义按钮 -->
<el-button
v-if="isAddButton"
class="add-button"
ref="addButton"
type="primary"
@click="addButton"
size="mini"
>添加标注</el-button>
</div>
</template>
<script>
export default {
data() {
return {
content: '<h3 style="text-align: start;">故事背景</h3><p style="text-align: start;">在遥远的艾斯特拉王国，时间并非一成不变，而是由古老传说中的“时光之钥”所掌控。这把神秘的钥匙，剧说是创世之初遗落的碎片，拥有逆转时光、重塑历史的无上力量。然而，这股力量若落入邪恶之手，将引发不可预知的灾难。数千年来，时光之钥被分为数块碎片，散落于世界的各个角落，守护着世界的平衡与秩序。</p><h3 style="text-align: start;">主要人物</h3><ul><li style="text-align: start;">艾莉娅：一位拥有敏锐直觉与温柔心灵的年轻女学者，对历史与神话充满无限好奇。她欧染间发现了一本古老的手稿，里面记载了时光之钥的传说，从此踏上了寻找钥匙碎片的征途。</li><li style="text-align: start;">莱恩：前王室骑士团成员，因一个误会而被流放。他武艺高强，性格孤傲但内心深处渴望救赎。艾莉娅的出现让他重新找到了战斗的意义，决定加入她的行列，保护她免受一切威胁。</li><li style="text-align: start;">凯尔：来自异世界的旅人，拥有操控元素的神奇能力。他因一次意外穿越到艾斯特拉，被艾莉娅和莱恩的勇气与决心所吸引，决定帮助他们寻找时光之钥碎片，同时寻找回到自己世界的方法。</li></ul><h3 style="text-align: start;">故事梗概</h3><h4 style="text-align: start;">第一章：启程与谜团</h4><p style="text-indent: 2em; text-align: start;">艾莉娅在一次图书馆的深夜探险中，意外发现了一哥尘封的手稿，上面详细记载了时光之钥的传说及其碎片的线索。意识到这份力量的重要性，她决定踏上寻找碎片的旅程。在旅途中，她先后遇到了莱恩和凯尔，三人因各自的信念与目的而结伴。他们首先来到了古老的遗迹——遗忘之城，那里隐藏着第一块时光之钥碎片的线索。通过解开一系列复杂的机关与谜题，他们成功获得了第一块碎片，但也因此引起了暗中窥视的邪恶势力的注意。</p><h4 style="text-align: start;">第二章：挑战与试炼</h4><p style="text-indent: 2em; text-align: start;">随着旅程的深入，三人遭遇了越来越多的挑战与危险。他们不仅要面对自然界的考研，如穿越迷雾森林、攀登险峻的山峰，还要应对来自邪恶势力的追击与阻挠。在一次激烈的战斗中，莱恩为了保护艾莉娅身受重伤，这让他深刻反思自己过去的错误与选择。而凯尔则利用自己的元素之力，在关键时刻扭转战局，展现了非凡的能力与智慧。通过这些经历，三人之间的友谊与信任日益加深，彼此成为了不可分割的伙伴。</p><h4 style="text-align: start;">第三章：真相与抉择</h4><p style="text-align: start;"> 在接近最后一块时光之钥碎片的过程中，他们逐渐揭开了时光之钥背后隐藏的真相。原来，时光之钥的力量并非无限制地操控时间，而是引导人们正视历史、珍惜现在、展望未来。邪恶势力之所以渴望得到它，是为了改变对他们不利的过去，从而逃避应有的惩罚与责任。面对这一残酷的真相，艾莉娅、莱恩和凯尔必须做出抉择：是继续追寻力量，还是用它来维护世界的平衡与正义？</p><h4 style="text-align: start;">第四章：决战与牺牲</h4><p style="text-align: start;">在最终的决战中，三人与邪恶势力展开了激烈的交锋。邪恶势力的首领试图利用时光之钥的力量改变历史，但艾莉娅等人坚决反对。在一场惊心动魄的对决后，凯尔利用自己的特殊能力，将时光之钥的碎片重新组合，释放出了一股强大的力量。然而，这股力量并非用于战斗，而是用来揭示真相、唤醒人们的良知与勇气。最终，邪恶势力在众人的联合反抗下彻底覆灭，时光之钥也化为了点点星光，融入了大地之中，象征着时间的不可逆转与生命的无限可能。</p><h4 style="text-align: start;">第五章：和平与新生</h4><p style="text-align: start;">战争结束后，艾斯特拉王国迎来了久违的和平与繁荣。艾莉娅、莱恩和凯尔也因为他们的英勇与智慧而被誉为英雄。但对他们而言，更重要的是这段旅程中收获的友谊、成长与自我认知。艾莉娅继续她的学术研究，致力于传承与发扬古代文化的精髓；莱恩则选择留在王城，用自己的剑与勇气保护这片土地与人民；而凯尔则在找到返回自己世界的方法后，带着对艾斯特拉的深深眷恋与祝福离开了。</p><p style="text-align: start;">《时光之钥》不仅是一部关于冒险与战痘的故事，更是一次心灵的洗礼与成长的旅程。它教会我们珍惜时间、勇于探索、团结合作、坚守正义，并在反思与成长中不断前行。在这个充满奇迹与未知的世界里，每个人都是自己命运的主宰者，而真正的力量则源自内心的信念与减持。</p>',
dialogVisible: false,
isAddButton: false,
quillReady: false, // 新增标志位，表示 Quill 编辑器是否已准备好
tableData: [ // 这个就是后台返回的关键词的数据
{
id: 1,
keyword: '故事',
startIndex: 0,
endIndex: 2
},
{
id: 2,
keyword: '遥远',
startIndex: 6,
endIndex: 8
}
],
editorOption: {
// 占位配置
placeholder: '',
modules: {
toolbar:{
container: [
// 这块是看你自己都要什么，就写什么就可以
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
[{ header: 1 }, { header: 2 }], // 标题
[{ list: 'ordered' }, { list: 'bullet' }], // 列表
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
]
}
}
},
}
},
mounted() {
this.highLight()
},
methods: {
onEditorBlur(editor) {
console.log('editor blur!', editor)
},
onEditorFocus(editor) {
console.log('editor focus!', editor)
},
onEditorReady(editor) {
console.log('editor ready!', editor)
},
onEditorChange({ editor, html, text }) {
console.log('editor change!', editor, html, text)
this.content = html
},
addButton() {},
// 标红
highLight() {
const editor = this.$refs.myQuillEditor.quill
this.tableData.forEach((record => {
const startIndex = record.startIndex
const selectLength = record.keyword.length;
// 或者 const selectLength = record.endIndex - record.startIndex
// quill.setSelection(startIndex, selectLength)
editor.formatText(startIndex, selectLength, {
'bold': true,
'color': 'red'
});
}))
},
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
}
</script>
<style scoped>
.add-button {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.container {
display: flex;
}
.annotation-button {
position: absolute;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000; /* 确保按钮在其他内容之上 */
}
::v-deep(.ql-container) {
height: 93% !important;
}
</style>
