java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果
當(dāng)我們需要鼠標(biāo)選中文本后,文本高亮。當(dāng)再次將選中的文本選中后,取消高亮效果時該如何實現(xiàn)呢?
一、介紹 window.getSelection
獲取鼠標(biāo)選中內(nèi)容,主要是利用了window.getSelection()這個API。返回一個Selection對象,表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置。
Selection 對象所對應(yīng)的是用戶所選擇的ranges(區(qū)域),俗稱拖藍(lán)。默認(rèn)情況下,該函數(shù)只針對一個區(qū)域,我們可以這樣使用這個函數(shù):
var selObj = window.getSelection();
var range = selObj.getRangeAt(0);
// selObj 被賦予一個 Selection對象
// range 被賦予一個 Range 對象
復(fù)制代碼
調(diào)用Selection.toString() 方法會返回被選中區(qū)域中的純文本。要求變量為字符串的函數(shù)會自動對對象進(jìn)行該處理,例如:
var selObj = window.getSelection();
window.alert(selObj);
復(fù)制代碼
二、一些現(xiàn)成的第三方庫
這是一個很不錯的“劃詞高亮”功能實現(xiàn)第三方庫,直接引用就可以,實現(xiàn)簡單。
參考文章可以看如何用JS實現(xiàn)“劃詞高亮”的在線筆記功能
具體使用:
// 安裝
npm i web-highlighter
// 使用
import Highlighter from 'web-highlighter';
(new Highlighter()).run();
復(fù)制代碼
高亮區(qū)域持久化:
import Highlighter from 'web-highlighter';
// 1. 實例化
const highlighter = new Highlighter();
// 2. 從后端(getRemoteData)獲取高亮信息,還原至網(wǎng)頁
getRemoteData().then(s => highlighter.fromStore(s.startMeta, s.endMeta, s.id, s.text));
// 3. 監(jiān)聽高亮筆記創(chuàng)建事件,并將信息存至后端
highlighter.on(Highlighter.event.CREATE, ({sources}) => save(sources));
// 4. 開啟自動劃詞高亮
highlighter.run();
復(fù)制代碼
持久化中監(jiān)聽筆記創(chuàng)建事件獲取的sources是一個數(shù)組,數(shù)組元素是對象,內(nèi)容如下圖:
//包含了 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"
}]
復(fù)制代碼
分析ueditor與復(fù)制
參考該文章用js給選中文字添加樣式、標(biāo)注,在上GitHub兩三下拿到ueditor源碼,開始讀源碼分析代碼。除去一些不需要的代碼和兼容性處理后,拿到了五個文件:
browser.js (瀏覽器版本判斷,用于做兼容性處理)
domUtils.js (dom操作)
dtd.js (節(jié)點的類型與元素判斷)
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
}
// 如果選中父節(jié)點包含 red-color 的class 則移除帶 red-color 的 span標(biāo)簽,否則則添加span標(biāo)簽進(jìn)行選中
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: `唧唧復(fù)唧唧,木蘭當(dāng)戶織。不聞機杼聲,唯聞女嘆息。
問女何所思,問女何所憶。女亦無所思,女亦無所憶。昨夜見軍帖,可汗大點兵,軍書十二卷,卷卷有爺名。阿爺無大兒,木蘭無長兄,愿為市鞍馬,從此替爺征。`
}}
>
復(fù)制代碼
以上是對選中文本高亮效果總結(jié)。
參考文獻(xiàn):
關(guān)于找一找教程網(wǎng)
本站文章僅代表作者觀點,不代表本站立場,所有文章非營利性免費分享。
本站提供了軟件編程、網(wǎng)站開發(fā)技術(shù)、服務(wù)器運維、人工智能等等IT技術(shù)文章,希望廣大程序員努力學(xué)習(xí),讓我們用科技改變世界。
[鼠標(biāo)選中文本劃詞高亮、再次選中劃詞取消高亮效果]http://www.zyiz.net/tech/detail-121373.html
總結(jié)
以上是生活随笔為你收集整理的java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java怎么往右浮动_[Java教程]j
- 下一篇: java中mongodb中dao通用_S