java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果
当我们需要鼠标选中文本后,文本高亮。当再次将选中的文本选中后,取消高亮效果时该如何实现呢?
一、介绍 window.getSelection
获取鼠标选中内容,主要是利用了window.getSelection()这个API。返回一个Selection对象,表示用户选择的文本范围或光标的当前位置。
Selection 对象所对应的是用户所选择的ranges(区域),俗称拖蓝。默认情况下,该函数只针对一个区域,我们可以这样使用这个函数:
var selObj = window.getSelection();
var range = selObj.getRangeAt(0);
// selObj 被赋予一个 Selection对象
// range 被赋予一个 Range 对象
复制代码
调用Selection.toString() 方法会返回被选中区域中的纯文本。要求变量为字符串的函数会自动对对象进行该处理,例如:
var selObj = window.getSelection();
window.alert(selObj);
复制代码
二、一些现成的第三方库
这是一个很不错的“划词高亮”功能实现第三方库,直接引用就可以,实现简单。
参考文章可以看如何用JS实现“划词高亮”的在线笔记功能
具体使用:
// 安装
npm i web-highlighter
// 使用
import Highlighter from 'web-highlighter';
(new Highlighter()).run();
复制代码
高亮区域持久化:
import Highlighter from 'web-highlighter';
// 1. 实例化
const highlighter = new Highlighter();
// 2. 从后端(getRemoteData)获取高亮信息,还原至网页
getRemoteData().then(s => highlighter.fromStore(s.startMeta, s.endMeta, s.id, s.text));
// 3. 监听高亮笔记创建事件,并将信息存至后端
highlighter.on(Highlighter.event.CREATE, ({sources}) => save(sources));
// 4. 开启自动划词高亮
highlighter.run();
复制代码
持久化中监听笔记创建事件获取的sources是一个数组,数组元素是对象,内容如下图:
//包含了 startMeta、endMeta、text和id
[{
startMeta: {parentTagName: "A", parentIndex: 6, textOffset: 2}
endMeta: {parentTagName: "H2", parentIndex: 0, textOffset: 2}
text: "中文↵Ba"
id: "91031887-238c-4118-a5b7-9def992b9479"
}]
复制代码
分析ueditor与复制
参考该文章用js给选中文字添加样式、标注,在上GitHub两三下拿到ueditor源码,开始读源码分析代码。除去一些不需要的代码和兼容性处理后,拿到了五个文件:
browser.js (浏览器版本判断,用于做兼容性处理)
domUtils.js (dom操作)
dtd.js (节点的类型与元素判断)
Range.js (封装的选中范围对象)
utils.js (工具类)
原作者 代码demo地址, 下面用到部分的与该博客作者略有不同。
主要使用到的代码:
import Range from "./utils/Range";
import domUtils from "./utils/domUtils.js";
const getSelectText = () => {
var getRange = () => {
var me = window;
var range = new Range(me.document);
var sel = window.getSelection();
if (sel && sel.rangeCount) {
var firstRange = sel.getRangeAt(0);
var lastRange = sel.getRangeAt(sel.rangeCount - 1);
range.setStart(firstRange.startContainer, firstRange.startOffset)
.setEnd(lastRange.endContainer, lastRange.endOffset);
}
return range
}
// 如果选中父节点包含 red-color 的class 则移除带 red-color 的 span标签,否则则添加span标签进行选中
if (domUtils.hasClass(range.startContainer.parentNode, "red-color")) {
range.removeInlineStyle("span", "red-color");
} else {
range.applyInlineStyle("span", {
class: "red-color"
});
range.select();
}
};
onMouseUp={getSelectText}
dangerouslySetInnerHTML={{
__html: `唧唧复唧唧,木兰当户织。不闻机杼声,唯闻女叹息。
问女何所思,问女何所忆。女亦无所思,女亦无所忆。昨夜见军帖,可汗大点兵,军书十二卷,卷卷有爷名。阿爷无大儿,木兰无长兄,愿为市鞍马,从此替爷征。`
}}
>
复制代码
以上是对选中文本高亮效果总结。
参考文献:
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[鼠标选中文本划词高亮、再次选中划词取消高亮效果]http://www.zyiz.net/tech/detail-121373.html
java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果相关推荐
- window10鼠标加速怎么关_鼠标加速怎么关闭_电脑鼠标加速如何关闭
2019-09-27 09:17:11 对于游戏玩家来讲,鼠标灵敏度是非常关键的,如果太慢会影响游戏进程,拖累队友.有些用户为了加快Mac系统鼠标反应速度开启加速功能,设置之后发现并不适合自己,那么M ...
- 鼠标点击测试_鼠标键盘如何检测故障,这边教您简单的测试
沉迷,教您简单的测试鼠标故障. 有线键盘和鼠标的检测步骤: (1)将电脑关机,拔插对应的连接线. (2)移除所有除了键盘和鼠标之外的设备,然后重启电脑. (3)重启后,观察鼠标的灯是否有亮.点击滚动锁 ...
- html禁止双击选中文本,CSS阻止页面双击选中文本
在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题 IE及Chrome下的方法一样,对相应的元素添加onselec ...
- java 鼠标动眼睛动_鼠标效果系列教程:会动的眼睛
这次我们要做的效果也非常漂亮,老头的眼睛会跟着你的鼠标转! ARAM NAME="_cx" VALUE="14552"> pluginspage=&quo ...
- java鼠标经过时变色_鼠标经过时单元格变色
鼠标经过时单元格变色 table{ color:#565; font:12px Arial, Helvetica, sans-serif; } td{ border-bottom:2px solid ...
- java cms 拖拽布局_鼠标拖拽就能轻松建站 We7 CMS评测
We7 CMS是由西部动力推出的一套采用C#开发的,基于.net2.0,可以运行于Oracle.SQLite.Sqlserver.MySQL.Access等数据库之上的网站内容管理系统软件(Conte ...
- java实现物体下落效果_手撸一个物体下落的控件,实现雪花飘落效果
效果图: 圣诞登录页.gif 参考文章: Android自定义View--从零开始实现雪花飘落效果 感谢原文作者,不仅实现了效果,并且写得非常详细,还做了优化.笔者参考原文作者的源码,做了一点修改,实 ...
- 鼠标右键转圈圈_鼠标点击右键后一直转圈圈
您好,我是微软社区独立顾问(Microsoft Community Independent Advisor)Gao ling,很高兴为您服务! 关于 "右键鼠标卡住" 的问题,请您 ...
- python 鼠标 自动点击_鼠标隔段时间自动点击屏幕
知识点:Python库及简单定时器的使用 1. 鼠标自动点击屏幕代码 (1). 首先 pip install pymouse (2). 运行代码出现:ModuleNotFoundError: No m ...
最新文章
- HR一般不会告诉你的八大真相
- 教你如何玩转redis-简单消息队列
- Win7上Git安装及配置过程
- Spring 基于xml配置方式的AOP
- 转:STL:string 大小(Size)和容量(Capacity)
- 实践 | Sentinel 扩展性设计
- 计算机公共基础知识论文,计算机等级考试二级公共基础知识汇总.doc
- SAP云解决方案和企业本地部署(On-Premise)混合架构下的安全认证权限管理
- vue生命周期及其应用场景
- hdfs mv命令_Hadoop2.x HDFS shell命令
- ie 出现 append无效
- 【Docker】练习-在容器中部署静态网站
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(十七) 完美精灵之八面玲珑(WPF Only)①...
- 基于云计算的数字化业务系统安全工程
- python定义字典对象时_python字典对与list对象组合使用小问题
- No controller found
- 金庸笔下人物名字来历
- 金蝶K3系统的网络服务端口
- 【Typecho插件】Typecho百度主动推送插件
- JS工具库moment —— 实现日历
热门文章
- tornado环境搭建
- CVPR 2021 | Facebook提出FP-NAS:搜索速度更快、分类精度更高、性能更好
- 辰星计划2021 | 旷视春季实习生招募—空中宣讲会第二弹来了!
- NeurIPS 2020 | 自步对比学习:充分挖掘无监督学习样本
- 实录 | 平安人寿资深算法工程师姚晓远:对话生成模型的探析与创新
- 又为写作思路熬到秃头?这16篇最新论文打包送你
- Python【算法中心 02】Web框架Django管理页面使用(管理员账号创建+API使用+应用添加)GreenPlum数据库引擎及API测试
- RabbitMQ——无法连接错误[AmqpConnectException: java.net.ConnectException: Connection refused: connect]解决方案
- Fence Repair
- linux proc 占用空间,一种诡异的Linux磁盘空间被占满问题