vue+"web-highlighter"实现高亮笔记/web荧光笔 API

1、highlighter = new Highlighter([opts])创建一个新highlighter实例。

{
    $root: document.documentElement,   
    exceptSelectors: null, 
    style: {
        className: 'red' 
    }
}

（1）$root 将实例挂载到某个dom元素上

 全局 document.documentElement
 或 this.$refs.headLine
 或 document.getElementById('headLine')

（2）exceptSelectors 如果元素与选择器匹配，则不会突出显示

默认值 null
可选值 ['strong','.class','#id'],但不支持级联选择器 ['.class span']

（3）style 以className的值替换高亮元素的类名，更改样式（默认选中时高亮为黄色）
在css 里定义，如不生效去掉 style 上的 scoped， 或者使用/deep/深度选择器

.red{
  color:#ff0000;
}
.hello /deep/ .red  {
  color:#ff0000;
}

2、highlighter.run() 当用户选择文本段时，将自动向文本添加突出显示。
3、highlighter.stop() 停止自动突出显示。
4、highlighter.dispose() 不再需要荧光笔，请先调用它。它将删除一些侦听器并进行一些清理
5、highlighter.fromRange(range)将range对象传进去，然后它将突出显示。
您可以使用window.getSelection().getRangeAt(0)获取范围对象
或用document.createRange()创建新范围。

const selection = window.getSelection();
if (selection.isCollapsed) {
    highlighter.fromRange(selection.getRangeAt(0));
}

6、highlighter.fromStore(start, end, text, id)回显已选的数据
start（Object）：开始元素的meta信息
end（Object）：当时结束元素的meta信息
text （string）：文字内容
id （string）：唯一ID
7、highlighter.remove(id)
通过它的ID清除突出显示的区域。默认情况下，id将由web-highlighter生成。您还可以为自己的规则添加一个钩子。Hooks doc在这里。
8、highlighter.removeAll()
清除所有突出显示的区域
9、highlighter.addClass(classname, id)
按唯一ID为突出显示的区域添加类名。可以更改突出显示区域的样式。
10、highlighter.removeClass(classname, id)
按唯一ID删除classname。
11、highlighter.getDoms([id])
获取突出显示区域中的所有环绕节点。突出显示的区域可能包含许多段。它将返回包装这些segements的所有dom节点。
如果id未传递，则将返回所有区域的包装节点。
12、highlighter.getIdByDom(node)
如果您有一个包装节点，它可以为您返回唯一的突出显示ID。
13、Event Listener 侦听器

var highlighter = new Highlighter();
highlighter.on(Highlighter.event.CREATE, function (data, inst, e) {
    // ...
});

回调函数将接收三个参数：

data：事件数据
inst：当前的Highligher实例
e：某些事件由浏览器触发（例如点击），web-highlighter将公开它

Highlighter.event是EventType类型。它包含：

EventType.CLICK：单击突出显示的区域
EventType.HOVER：鼠标进入突出显示的区域
EventType.HOVER_OUT：鼠标离开突出显示的区域
EventType.CREATE：创建突出显示的区域
EventType.REMOVE：删除突出显示的区域

不同的事件有不同data。属性如下：
CLICK,HOVER,HOVER_OUT id 突出显示ID
CREATE

source	对象数组
source是一个HighlightSource对象。
后端的数据必须使用（JSON.stringify()）的数据结构来表示浏览器中的dom节点。
HighlightSource是为此设计的数据结构。

type  字符串
解释了为什么要创建突出显示的区域。
type有两个可能的值：from-input和from-store。
from-input显示由于用户的选择而创建突出显示的区域。
from-store意味着它来自后端数据。

14、