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

梦里梦外; 2022-10-14 05:26 413阅读 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 条评论，413人围观）

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

相关阅读

相关 vscode下载插件让vue代码高亮

目录一、概述二、解决办法 -------------------- 一、概述在vscode里面编写vue代码的时候，发现代码是灰色的，看着不舒服 ![10

- 日理万妓/ 2023年09月24日 20:10/ 0 赞/ 70 阅读

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

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

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

相关 JS 代码高亮插件

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

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

相关 vsCode选中内容高亮插件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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