vue web-highlighter 划词高亮功能实现及遇到的问题（线上图书）

 gitcode web-highlighter 快速通道

gitHub web-highlighter 快速通道

1、下载插件

npm i web-highlighter

2、引入插件

import Highlighter from "web-highlighter";

3、初始化插件

mounted(){this.highlighter = new Highlighter({$root: document.getElementById("preview_text"), // 使用位置的根元素exceptSelectors: null, // 如果元素与选择器匹配，则不会突出显示wrapTag: "span",style: {className: ["double-line-highlight", "yellowline-color-highlight"],},verbose: false, // 它需要输出（打印）一些警告和错误消息吗exceptSelectors: [], // 要跳过的元素   'h1', '.title'});
}

4、使用

 <div id="preview_text" class="content" v-html="bookInfo" @mouseup.navtive="mouseup_highlight"></div>

.exam_hig {background-color: red;
}

// 通过 window.getSelection() 获取用户选中元素
mouseup_highlight(event){var that = this;that.active_event = event.target; // 选中标签that.sel = window.getSelection(); // 选中文本that.range = that.sel.getRangeAt(0) // 获取范围对象
}// 保存接口
postHig(){// 也可以在保存之前修改高亮器的选项。参数结构与构造函数相同，可以只传递部分选项。this.highlighter.setOption({style: {className: ['exam_hig'],},});// highlighter.fromRange(range) 创建高亮区域时由web-highlighter生成的一种特殊对象。为了在后台（数据库）中持久化表示DOM节点，需要找到一种数据结构，这就是web-highlighter中的HighlightSource。this.HighlightSource = await this.highlighter.fromRange(this.range);this.HighlightSource.claName = 'exam_hig'  // 这是因项目需要不同高亮效果我自己自定义的高亮类名var formdata = new FormData();formdata.append("highlightSource", JSON.stringify(this.HighlightSource));// 将高亮后的信息保存到数据库const { data, code, msg, count } = await this.$https.postHighlightSource()
}

HighlightSource 返回的属性的意义：

• start：关于起始元素的元信息
• end：关于结束元素的元信息
• text：文本内容
• id：唯一标识符

注意：修改、删除都需要用到 id

5、页面回显

// 获取高亮列表
getHigList(){let formData = new FormData();const { data, code, msg } = await this.$https.getHighlightSourceList(formData);if(code == 200){this.hig_list = datathis.hig_list.forEach(item=>{var info_block = JSON.parse(item.higObj); // 返回的高亮信息var location_dom = this.highlighter.getDoms(info_block.id) // 获取位置if (location_dom.length == 0) {this.highlighter.setOption({style: {className: info_block.claName,},});this.HighlightSource = await this.highlighter.fromStore(info_block.startMeta,info_block.endMeta,info_block.text,info_block.id);)}
}

 注意：返回的列表需要排序！！！不然可能导致高亮位置错误！！！

6、修改

// id 为  HighlightSource 对象中的高亮唯一标识
editHig(id){// 直接切换类名this.highlighter.removeClass('redClassName', id);this.highlighter.addClass('greenClassName', id);
}

7、删除

// id 为  HighlightSource 对象中的高亮唯一标识
delHig(id){this.highlighter.remove(id);
}

8、销毁

beforeDestroy(){// 当你不再需要使用高亮功能时，需要先使用该方法来移除一些事件监听，回收一些资源。this.highlighter.dispose();
}

---

遇到的问题：

1、回显高亮位置错误

        可能是列表没有排序导致的（反正我就是）因为这个插件是一个序列化与反序列化的过程

2、HighlightSource  返回为 null

        可能是没有正确获取到标签导致的，需要先完成页面的DOM加载后再获取。