web highlighter

Web Highlighter ？ q

任何網站上的無依賴性lib用於突出顯示和持久性？

---

英語| 簡體中文

背景

它來自一個想法：突出顯示網站上的文本，並像您在PDF中所做的那樣保存突出顯示的領域。

如果您曾經訪問過Medive.com，則必須知道突出顯示註釋的功能：用戶選擇文本段，然後單擊“突出顯示”按鈕。然後，文本將以閃亮的背景顏色突出顯示。此外，下次訪問時，突出顯示的區域將被保存和恢復。就像一個簡單的演示bellow。

這對於讀者來說是一個有用的功能。如果您是開發人員，則可能希望您的網站支持它並吸引更多訪問。如果您是用戶（像我一樣），則可能需要一個瀏覽器 - 插曲來執行此操作。

因此，倉庫（網絡高速公路）旨在幫助您快速在任何網站上實施突出顯示（例如，博客，文檔查看者，在線書籍等）。它包含註釋突出顯示和持久性的核心能力。您可以通過一些易於使用的API實施自己的產品。它已用於我們的生產網站。

安裝

npm i web-highlighter

用法

選擇文本時，只有兩行突出顯示。

 import Highlighter from 'web-highlighter' ;
( new Highlighter ( ) ) . run ( ) ;

如果您需要持久性，則四行就可以了。

 import Highlighter from 'web-highlighter' ;

// 1. initialize
const highlighter = new Highlighter ( ) ;

// 2. retrieve data from backend, then highlight it on the page
getRemoteData ( ) . then ( s => highlighter . fromStore ( s . startMeta , s . endMeta , s . id , s . text ) ) ;

// 3. listen for highlight creating, then save to backend
highlighter . on ( Highlighter . event . CREATE , ( { sources } ) => save ( sources ) ) ;

// 4. auto highlight
highlighter . run ( ) ; 

例子

一個更複雜的例子

 import Highlighter from 'web-highlighter' ;

// won't highlight pre&code elements
const highlighter = new Highlighter ( {
    exceptSelectors : [ 'pre' , 'code' ]
} ) ;

// add some listeners to handle interaction, such as hover
highlighter
    . on ( 'selection:hover' , ( { id } ) => {
        // display different bg color when hover
        highlighter . addClass ( 'highlight-wrap-hover' , id ) ;
    } )
    . on ( 'selection:hover-out' , ( { id } ) => {
        // remove the hover effect when leaving
        highlighter . removeClass ( 'highlight-wrap-hover' , id ) ;
    } )
    . on ( 'selection:create' , ( { sources } ) => {
        sources = sources . map ( hs => ( { hs } ) ) ;
        // save to backend
        store . save ( sources ) ;
    } ) ;

// retrieve data from store, and display highlights on the website
store . getAll ( ) . forEach (
    // hs is the same data saved by 'store.save(sources)'
    ( { hs } ) => highlighter . fromStore ( hs . startMeta , hs . endMeta , hs . text , hs . id )
) ;

// auto-highlight selections
highlighter . run ( )

此外，此存儲庫中還有一個示例（在example文件夾中）。要玩它，您只需要 -

首先輸入存儲庫並運行

npm i

然後開始示例

 npm start

最後訪問http://127.0.0.1:8085/

---

另一個由Web-Highllighter構建的真實產品（對於左側的突出顯示區域）：

它如何工作

它將通過Selection API讀取所選範圍。然後，該範圍的信息將轉換為可序列化的數據結構，以便將其存儲在後端中。當用戶下次訪問您的頁面時，這些數據將在您的頁面中返回並進行啟用。數據結構是獨立的技術堆棧。因此，您可以在用React / Vue / Vue / Angular / Jquery等製成的任何“靜態”頁面上使用。

有關更多詳細信息，請閱讀本文（中文）。

蜜蜂

1。選項

 const highlighter = new Highlighter ( [ opts ] )

創建一個新的highlighter實例。

opts將合併到默認選項中（顯示Bellow）。

 {
    $root : document . documentElement ,
    exceptSelectors : null ,
    wrapTag : 'span' ,
    style : {
        className : 'highlight-mengshou-wrap'
    }
}

所有選項：

姓名	類型	描述	必需的	預設
$ root	`文件	htmlelement`	容器啟用突出顯示	不
除外	Array<string>	如果元素與選擇器匹配，則不會突出顯示	不	null
包裹	string	HTML標籤用於包裝突出顯示的文本	不	span
冗長	boolean	劑量需要輸出（打印）一些警告和錯誤消息	不	false
風格	Object	控制突出的區域樣式	不	下面的詳細信息

style字段選項：

姓名	類型	描述	必需的	預設
className	string	包裝元素的類名稱	不	highlight-mengshou-wrap

exceptSelectors需要null或Array<string> 。它支持ID選擇器，類選擇器和標籤選擇器。例如，跳過H1和.title元素：

 var highlighter = new Highlighter ( {
    exceptSelectors : [ 'h1' , '.title' ]
} ) ;

2。靜態方法

Highlighter.isHighlightSource(source)

如果source是一個高光源對象，它將返回true vice經文。

Highlighter.isHighlightWrapNode($node)

如果$node是高光包裝器dom節點，則它將返回true ，vice vice vice。

3。實例方法

highlighter.run()

開始自動高光。當用戶選擇文本段時，將自動添加突出顯示。

highlighter.stop()

它將停止自動高光。

highlighter.dispose()

當您不再想要熒光筆時，請記住先打電話給它。它將刪除一些聽眾並進行一些清理。

highlighter.fromRange(range)

您可以將Range像傳遞給它，然後將突出顯示。您可以使用window.getSelection().getRangeAt(0)獲取範圍對像或使用document.createRange()創建新範圍。

將其用作波紋管：

 const selection = window . getSelection ( ) ;
if ( ! selection . isCollapsed ) {
    highlighter . fromRange ( selection . getRangeAt ( 0 ) ) ;
} 

highlighter.fromStore(start, end, text, id)

通常，您使用此API來強調文本，該文本通過後端存儲的持久信息。

這四個值來自HighlightSource對象。 HighlightSource對像是由Web-Highlighter創建的特殊對象。對於後端（數據庫）中的持久性，有必要找到代表DOM節點的數據結構。該結構在Web-Highllighter中稱為HighlightSource 。

四個屬性的含義：

• 啟動Object ：有關開始元素的元信息
• 結束Object ：有關結束元素的元信息
• 文本string ：文本內容
• ID string ：唯一ID

highlighter.remove(id)

通過其唯一ID刪除（清潔）突出顯示區域。默認情況下，ID將由Web-Highllighter生成。您還可以為自己的規則添加鉤子。掛鉤文檔在這裡。

highlighter.removeAll()

刪除所有屬於根部的突出顯示區域。

highlighter.addClass(className, id)

通過唯一ID添加一個為突出顯示區域（包裝元素）的className。您可以使用此API更改突出顯示區域的樣式。

highlighter.removeClass(className, id)

通過唯一ID刪除className。它是highlighter.addClass的逆操作。

highlighter.getDoms([id])

在突出顯示的區域中獲取所有包裹節點。突出顯示的區域可能包含許多細分市場。它將返回所有包裝這些段的DOM節點。

如果id未通過，它將返回所有區域的包裝節點。

highlighter.getIdByDom(node)

如果您有DOM節點，則可以為您返回唯一的突出顯示ID。傳遞非包裝元素時，它將找到最近的祖先包裝器節點。

highlighter.getExtraIdByDom(node)

如果您有一個DOM節點，則可以為您返回額外的唯一突出顯示ID。傳遞非包裝元素時，它將找到最近的祖先包裝器節點。

highlighter.setOption(opt)

您可以使用此API來更改熒光筆的選項。參數的結構與構造函數相同。您可以通過部分選項。

4。活動聽眾

Web-Highlighter使用聽眾來處理這些事件。

例如

 var highlighter = new Highlighter ( ) ;
highlighter . on ( Highlighter . event . CREATE , function ( data , inst , e ) {
    // ...
} ) ;

回調功能將接收三個參數：

• 數據any ：事件數據
• Inst Highlighter ：當前熒光筆實例
• E Event ：某些事件是由瀏覽器觸發的（例如單擊），Web-Highlighter將公開它

Highlighter.event是EventType類型。它包含：

• EventType.CLICK ：單擊突出顯示的區域
• EventType.HOVER ：鼠標進入突出顯示的區域
• EventType.HOVER_OUT ：鼠標離開突出顯示的區域
• EventType.CREATE ：創建了一個突出顯示的區域
• EventType.REMOVE ：刪除突出顯示的區域

不同的事件具有不同的data 。以下屬性：

EventType.CLICK

姓名	描述	類型
id	突出顯示ID	細繩

EventType.HOVER

姓名	描述	類型
id	突出顯示ID	細繩

EventType.HOVER_OUT

姓名	描述	類型
id	突出顯示ID	細繩

EventType.CREATE

沒有參數e

姓名	描述	類型
source	HighlightSource對象	大批
type	創建的原因	細繩

source是HighlightSource對象。當創建突出顯示區域時，它是由Web-Highllighter創建的對象。對於後端（數據庫）中的持久性，有必要使用可以序列化的數據結構（ JSON.stringify() ）代表瀏覽器中的DOM節點。 HighlightSource是為此設計的數據結構。

type說明了為什麼會創建突出顯示區域。現在type具有兩個可能的值： from-input和from-store 。 from-input顯示，由於用戶的選擇而創建了突出顯示的區域。 from-store意思是從存儲中。

EventType.REMOVE

沒有參數e

姓名	描述	類型
ids	高光ID的列表	大批

5。鉤

鉤子可讓您強大地控制突出顯示的流程。您幾乎可以通過掛鉤自定義任何邏輯。在“前進”部分中查看更多。

相容性

這取決於選擇API。

• 即11
• 邊緣
• Firefox 52+
• Chrome 15+
• Safari 5.1+
• 歌劇15+

移動支持：在移動設備上自動檢測移動設備並使用觸摸事件。

進步

它為您提供了一些鉤子，以便可以自己控制突出顯示行為。

要了解有關鉤子的更多信息，請閱讀此文檔。

執照

麻省理工學院