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

梦里梦外; 2022-10-14 05:26 400阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 饼图默认高亮，选中任意选项离开后再次高亮，中心区显示选中的数据

主要方法： // 高亮 setHighLight(id) { let myChart = this.$echarts.ini

逃离我推掉我的手/ 2023年01月08日 08:26/ 0 赞/ 533 阅读

相关推荐一个谷歌浏览器插件：划词翻译

地址：[划词翻译插件][Link 1] 最近在看一些英文文档，遇到了一些词汇不认识，在谷歌浏览器上找到了这个翻译插件谷歌浏览器自己有一个全文翻译的功能，对于一些技术类文档

以你之姓@/ 2023年01月01日 11:47/ 0 赞/ 224 阅读

相关 JS 代码高亮插件

简介在网页的使用过程中，经常会有代码展示的必要。而不同颜色的关键词，可以让代码看起来更直观、更美观。代码高亮插件官网：[https://highlightjs.or

﹏ヽ暗。殇╰゛Y/ 2022年12月31日 06:22/ 0 赞/ 192 阅读

相关 vsCode选中内容高亮插件

默认vsCode用来编写代码，然后选中的内容的话，默认不是很突出，所以需要用到一个能够使得你选中的内容更加高亮突出的插件，这样有利于你寻找代码直接的衔接和定义的位置。本文介

深碍√TFBOYSˉ_/ 2022年11月16日 04:49/ 0 赞/ 431 阅读

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

web-highlighter 插件安装：npm i web-highlighter 使用： import Highlighter from 'web-hi

梦里梦外;/ 2022年10月14日 05:26/ 0 赞/ 401 阅读

相关 JointJS点击选中元素高亮显示

使用 JointJs 时，当我们点击了选中的元素时，如果我们需要对点击元素高亮显示，点击空白处取消高亮显示的话，可以继续往下看代码实现。官方文档相关部分： [highl

心已赠人/ 2022年08月31日 12:23/ 0 赞/ 245 阅读

相关 CTreeCtrl失去焦点后高亮选中项

CTreeCtrl失去焦点后高亮选中项在VC++编程中，CTreeCtrl是使用最多的一种控件，由于MFC中包含了太多的宏，并且注释也不够仔细，这导致了我们在

以你之姓@/ 2022年08月13日 15:48/ 0 赞/ 290 阅读

相关 MyEclipse设置JAVA选中高亮显示

//记下来，省的每次都要百度 1.打开显示功能选择Windows->Preferences->Java-> Editor-> Mark Occurrences ，勾选选

一时失言乱红尘/ 2022年08月09日 09:39/ 0 赞/ 230 阅读

相关 Eclipse 高亮显示选中的相同变量

转载至：[http://technique-digest.iteye.com/blog/1343467][http_technique-digest.iteye.com_bl

野性酷女/ 2022年01月11日 20:51/ 0 赞/ 305 阅读

相关 python变量选中后高亮显示

file>settings>editor>color scheme>general>code>identifier under caret>background 转载于:ht

分手后的思念是犯贱/ 2021年11月05日 03:02/ 0 赞/ 387 阅读