vue中划词选中后高亮显示web-highlighter插件

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

vue中划词选中后高亮显示web-highlighter插件相关推荐

Vue中el-table追加行后固定列滚动错位问题
Vue中el-table追加行后固定列滚动错位问题一.问题描述偶然发现一个问题,但是并没有找到解决方案,自己调试了两个多小时终于解决. 先贴出问题业务描述:在已查询完全部的符合条件的数据后,表格 ...
vscode 选中后相同内容高亮插件推荐
vscode 选中后相同内容高亮插件推荐本文主要就是推荐下这款插件,毕竟编辑器本来的选中颜色不是很清楚.下面的设置,在插件的介绍文档中都有. 下载插件 highlight-icemode 配置插件 ...
vue中后台管理登录后的token管理
在做后台管理系统的时候,登录后token管理很重要.上代码,有瑕疵,有待改善,见谅. import Vue from 'vue' import Router from 'vue-router' imp ...
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
在vue中,可以用sessionStorage或localStorage来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage),下面介绍用localS ...
解决vue中使用v-html解析后table表格的线不见了
vue中使用 v-html 解析富文本 1.在编辑器中输入什么就显示什么 2.使用v-html解析后有问题可以看看☞☞ 官网地址需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 ...
vue中文字转语言，适配web移动端
在PC端文字转语音可以使用HTML5中的API,SpeechSynthesisUtterance const synth = window.speechSynthesis; const msg = n ...
点击链接，执行.py脚本，cgi脚本，浏览器中没有显示解析后的web页面，而是.py文件本身的代码内容...
在.py文件中加上这个就好了. print('Content-type:text/html \n\n') 不加这个,有时候啥也不显示. 转载于:https://www.cnblogs.com/gwj9 ...
vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器数据渲染通过 :options="options" 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ chec ...
vue中双击事件选中文本、通过输入框实现双击输入文字
<template> <footer class="main-footer"> <h1>bbbbbbbbbbbbbbb</h1> & ...

vue中划词选中后高亮显示web-highlighter插件

vue中划词选中后高亮显示web-highlighter插件相关推荐

最新文章

热门文章