web-highlighter 插件
安装:npm i web-highlighter
使用:
import Highlighter from 'web-highlighter';
const highlighter = new Highlighter({
exceptSelectors: ['pre', 'code']
});
export default {
name: 'wangEditor',
data () {
return {
}
},
mounted () {
this.initHighlighter()
},
methods: {
initHighlighter(){
highlighter
//鼠标移入触发
.on('selection:hover', ({id}) => {
highlighter.addClass('highlight-wrap-hover', id);
})
//鼠标移出触发
.on('selection:hover-out', ({id}) => {
highlighter.removeClass('highlight-wrap-hover', id)
})
//创建触发
.on('selection:create', ({sources}) => {
sources = sources.map(hs => ({hs}))
})
//鼠标点击触发
.on('selection:click', ({ id }) => {
this.currId = id
})
//根据需要可绑定其他事件
//运行
highlighter.run()
}
}
}
还有很多api
highlighter.run() //选中后自动高亮
highlighter.stop() //阻止选中后自动高亮
highlighter.removeClass('highlight-wrap-hover', id) //移除高亮显示
highlighter.remove(id) //移除高亮节点
const selection = window.getSelection() //鼠标滑动选词
highlighter.fromRange(selection.getRangeAt(0)) //主动给选中的此添加高亮效果
想要了解更多~
官方文档:https://www.npmjs.com/package/web-highlighter