web highlighterのダウンロード-Web web highlighterソースコードのダウンロード

web highlighter

ウェブサイトデータ

v0.7.4

ダウンロード

`Web Highlighter` ？§

任意のウェブサイトでの強調と永続性のテキストの依存性のないlib？§

英語| 简体中文

背景

それはアイデアからです：ウェブサイトでテキストを強調表示し、PDFでしていることと同じように強調表示された領域を保存します。

Medium.comにアクセスしたことがある場合は、メモの強調表示の機能を知っている必要があります。ユーザーがテキストセグメントを選択し、[ハイライト]ボタンをクリックします。その後、テキストは輝く背景色で強調表示されます。その上、ハイライトされたエリアは、次回訪問すると保存され、回復します。それはシンプルなデモのようなものです。

これは読者にとって便利な機能です。あなたが開発者なら、あなたのウェブサイトがそれをサポートし、より多くの訪問を引き付けることを望むかもしれません。あなたがユーザー（私のような）である場合、ブラウザプラギンにこれを行う必要があります。

このため、リポジトリ（Webハイライター）は、あらゆるWebサイト（ブログ、ドキュメント視聴者、オンラインブックなど）にハイライトノートの実装を支援することを目指しています。強調と永続性のコア能力が含まれています。また、使いやすいAPIで独自の製品を実装できます。生産のサイトに使用されています。

インストール

npm i web-highlighter

使用法

テキストが選択されたときに強調表示された2行のみ。

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

持続性が必要な場合は、4行が作成します。

 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ハイライターで構築されたもう1つの実際の製品（左側のハイライトエリア用）：

製品サンプル

それがどのように機能するか

Selection APIによって選択された範囲を読み取ります。その後、範囲の情報は、バックエンドに保存できるように、シリアル化可能なデータ構造に変換されます。ユーザーが次回ページにアクセスすると、これらのデータが返され、ページで脱色が繰り返されます。データ構造は、Tech Stack Independentです。そのため、React / Vue / Angular / JQueryなどで作られた「静的」ページで使用できます。

詳細については、この記事（中国語）をご覧ください。

API

1。オプション

 const highlighter = new Highlighter ( [ opts ] )

新しいhighlighterインスタンスを作成します。

optsデフォルトのオプションに統合されます（Bellowが表示）。

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

すべてのオプション：

名前	タイプ	説明	必須	デフォルト
$ root	`ドキュメント	htmlelement`	ハイライトを有効にするコンテナ	いいえ
Selectorsを除く	`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詩を返します。

`Highlighter.isHighlightWrapNode($node)`

$nodeハイライトラッパーDOMノードである場合、それはtrue 、その逆を返します。

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を使用して、バックエンドから保存された永続的な情報によってテキストを強調表示します。

これらの4つの値は、 HighlightSourceオブジェクトからのものです。 HighlightSourceオブジェクトは、作成された強調表示された領域によってWebハイライターによって作成された特別なオブジェクトです。バックエンド（データベース）の永続性のために、DOMノードを表すためにデータ構造を見つける必要があります。この構造は、WebハイライターのHighlightSourceと呼ばれます。

4つの属性の意味：

開始Object ：開始要素に関するメタ情報
終了Object ：メタ情報は、エンドエレメントに関する情報です
テキスト文字string ：テキストコンテンツ
ID string ：一意のID

`highlighter.remove(id)`

一意のIDで強調表示された領域を削除（クリーン）します。 IDは、デフォルトでWebハイライターによって生成されます。自分のルールにフックを追加することもできます。ここにドキュメントをフックします。

`highlighter.removeAll()`

ルートに属するすべての強調表示された領域を削除します。

`highlighter.addClass(className, id)`

一意のIDで強調表示された領域（ラップ要素）のクラス名を追加します。このAPIを使用して、強調表示された領域のスタイルを変更できます。

`highlighter.removeClass(className, id)`

一意のIDでクラス名を削除します。 highlighter.addClassの逆操作です。

`highlighter.getDoms([id])`

強調表示された領域ですべてのラップノードを取得します。強調表示された領域には、多くのセグメントが含まれている場合があります。これらのセグメントをラップするすべてのDOMノードを返します。

idが渡されない場合、すべてのエリアのラップノードを返します。

`highlighter.getIdByDom(node)`

DOMノードがある場合は、一意のハイライトIDを返すことができます。非ラッパー要素を渡すと、最も近い先祖ラッパーノードが見つかります。

`highlighter.getExtraIdByDom(node)`

DOMノードがある場合は、特別な一意のハイライトIDを返すことができます。非ラッパー要素を渡すと、最も近い先祖ラッパーノードが見つかります。

`highlighter.setOption(opt)`

このAPIを使用して、蛍光ペンのオプションを変更できます。パラメーターの構造は、コンストラクターの構造と同じです。部分的なオプションを渡すことができます。

4。イベントリスナー

Webハイライターはリスナーを使用してイベントを処理します。

例えば

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

コールバック関数は3つのパラメーターを受け取ります。

データany ：イベントデータ
Inst Highlighter ：現在の蛍光ペンインスタンス
e Event ：一部のイベントはブラウザ（クリックなど）によってトリガーされ、Webハイライターが公開します

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ハイライターによって作成されたオブジェクトです。 BackEnd（データベース）の永続性のために、ブラウザのDomノードを表すためにシリアル化（ JSON.stringify() ）を使用できるデータ構造を使用する必要があります。 HighlightSource 、このために設計されたデータ構造です。

type 、強調表示された領域が作成される理由を説明します。現在、 type 、 from-inputとfrom-storeの2つの値があります。 from-inputユーザーの選択により、強調表示された領域が作成されたことを示しています。 from-storeストレージからそれを意味します。

`EventType.REMOVE`

パラメーターなしe

名前	説明	タイプ
`ids`	ハイライトIDのリスト	配列

5。フック

フックにより、強力なフローを強力に制御できます。フックごとにロジックをほぼカスタマイズできます。「Advance」パーツの詳細をご覧ください。

互換性

選択APIに依存します。

IE 11
角
Firefox 52+
Chrome 15+
Safari 5.1+
オペラ15+

モバイルサポート：モバイルデバイスのかどうかを自動的に検出し、モバイルデバイスでタッチイベントを使用します。

前進

ハイライトの動作を自分でよりよく制御できるように、いくつかのフックを提供します。

フックの詳細については、このドキュメントをお読みください。

ライセンス

mit

拡大する

追加情報

バージョン v0.7.4
タイプウェブサイトデータ
更新時間 2025-04-13
サイズ 1.95MB
から Github

web highlighter

Web Highlighter ？§

背景

インストール

使用法

例

それがどのように機能するか

API

1。オプション

2。静的メソッド

Highlighter.isHighlightSource(source)

Highlighter.isHighlightWrapNode($node)

3.インスタンスメソッド

highlighter.run()

highlighter.stop()

highlighter.dispose()

highlighter.fromRange(range)

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

highlighter.remove(id)

highlighter.removeAll()

highlighter.addClass(className, id)

highlighter.removeClass(className, id)

highlighter.getDoms([id])

highlighter.getIdByDom(node)

highlighter.getExtraIdByDom(node)

highlighter.setOption(opt)