web highlighter Download - web highlighter Quellcode Download

web highlighter

Website-Daten

v0.7.4

Herunterladen

`Web Highlighter` ? ️

Eine Abhängigkeitsabhängigkeits-Bibliothek für Text-Hervorhebungen und Beharrlichkeit auf einer Website? ️

Englisch | 简体中文

Hintergrund

Es stammt aus einer Idee: Markieren Sie Texte auf der Website und speichern Sie die hervorgehobenen Bereiche, genau wie Sie in PDF tun.

Wenn Sie jemals Medium.com besucht haben, müssen Sie die Funktion des Hervorhebens von Notizen kennen: Benutzer wählen ein Textsegment aus und klicken auf die Schaltfläche "Highlight". Dann wird der Text mit einer leuchtenden Hintergrundfarbe hervorgehoben. Außerdem werden die hervorgehobenen Bereiche bei der nächsten Besetzung gerettet und geborgen. Es ist wie die einfache Demo -Bellow.

Dies ist eine nützliche Funktion für Leser. Wenn Sie Entwickler sind, möchten Sie möglicherweise, dass Ihre Website diese unterstützt und mehr Besuche anzieht. Wenn Sie ein Benutzer sind (wie ich), möchten Sie möglicherweise, dass ein Browser-Plugin dies tut.

Aus diesem Grund soll der Repo (Web-Highlighter) Ihnen helfen, auf jeder Website schneller Highlight-Note zu implementieren (z. B. Blogs, Dokumentzuschüsse, Online-Bücher usw.). Es enthält die Kernfähigkeiten für die Notiz -Hervorhebung und Persistenz. Und Sie können Ihr eigenes Produkt durch einige benutzerfreundliche APIs implementieren. Es wurde für unsere Websites in der Produktion verwendet.

Installieren

npm i web-highlighter

Verwendung

Nur zwei Zeilen, hervorgehoben, wenn Texte ausgewählt werden.

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

Wenn Sie Ausdauer brauchen, machen es vier Zeilen.

 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 ( ) ;

Beispiel

Ein komplexeres Beispiel

 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 ( )

Außerdem gibt es in diesem Repo ein Beispiel (im example ). Um damit zu spielen, brauchen Sie nur - -

Geben Sie zunächst das Repository ein und führen Sie aus

npm i

Dann starten Sie das Beispiel

 npm start

Besuchen Sie schließlich http://127.0.0.1:8085/

Ein weiteres echtes Produkt, das mit Web-Highlighter gebaut wurde (für den hervorgehobenen Bereich links):

Produktprobe

Wie es funktioniert

Es wird den ausgewählten Bereich per Selection API gelesen. Anschließend werden die Informationen des Bereichs in eine serialisierbare Datenstruktur umgewandelt, damit er im Backend gespeichert werden kann. Wenn Benutzer beim nächsten Mal Ihre Seite besuchen, werden diese Daten auf Ihrer Seite zurückgegeben und deserialisiert. Die Datenstruktur ist Tech Stack unabhängig. So können Sie auf allen "statischen" Seiten mit React / Vue / Angular / JQuery und anderen verwenden.

Weitere Informationen finden Sie in diesem Artikel (auf Chinesisch).

Apis

1. Optionen

 const highlighter = new Highlighter ( [ opts ] )

Erstellen Sie eine neue highlighter -Instanz.

opts werden in die Standardoptionen (belly angezeigt) zusammengefasst.

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

Alle Optionen:

Name	Typ	Beschreibung	erforderlich	Standard
$ root	`Dokument	Htmlelement`	der Behälter, um das Hervorheben zu ermöglichen	NEIN
außergewes	`Array<string>`	Wenn ein Element mit dem Selektor übereinstimmt, wird es nicht hervorgehoben	NEIN	`null`
Wraptag	`string`	Das HTML -Tag zum Wickeln hervorgehobene Texte	NEIN	`span`
ausführlich	`boolean`	Dosis Es muss eine Warn- und Fehlermeldung ausgeben (ausdrucken)	NEIN	`false`
Stil	`Object`	Steuerungssteuerstil hervorgehobene Bereiche	NEIN	Details unten

style :

Name	Typ	Beschreibung	erforderlich	Standard
Klassenname	`string`	Der Klassenname für Wrap -Element	NEIN	`highlight-mengshou-wrap`

exceptSelectors benötigt null oder Array<string> . Es unterstützt ID -Selektoren, Klassenauswahl- und Tag -Selektoren. Zum Beispiel, um H1- und .title -Elemente zu überspringen:

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

2. Statische Methoden

`Highlighter.isHighlightSource(source)`

Wenn es sich bei der source um ein Highlight -Quellobjekt handelt, wird er true , Vice Vers.

`Highlighter.isHighlightWrapNode($node)`

Wenn der $node ein Highlight -Wrapper -DOM -Knoten ist, wird er true , Vizevers zurückgegeben.

3. Instanzmethoden

`highlighter.run()`

Starten Sie Auto-Highlighting. Wenn der Benutzer ein Textsegment auswählt, wird dem Text automatisch ein Hervorheben hinzugefügt.

`highlighter.stop()`

Es wird das Autohighlight anhalten.

`highlighter.dispose()`

Wenn Sie den Textmarker nicht mehr wollen, denken Sie daran, ihn zuerst zu nennen. Es wird einige Zuhörer entfernen und etwas aufräumen.

`highlighter.fromRange(range)`

Sie können ein Range an ihn weitergeben und dann wird es hervorgehoben. Sie können window.getSelection().getRangeAt(0) verwenden, um ein Bereichsobjekt zu erhalten, oder document.createRange() zum Erstellen eines neuen Bereichs.

Benutze es als bellow:

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

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

Meistens verwenden Sie diese API, um den Text durch die vom Backend gespeicherten anhaltenden Informationen hervorzuheben.

Diese vier Werte stammen aus dem HighlightSource -Objekt. HighlightSource -Objekt ist ein spezielles Objekt, das von Web-Highlighter erstellt wurde, wenn er erstellt wurde. Für die Persistenz in Backend (Datenbank) ist es erforderlich, eine Datenstruktur zu finden, um einen DOM -Knoten darzustellen. Diese Struktur wird als HighlightSource in Web-Highlighter bezeichnet.

Vier Attribute Bedeutungen:

Object : Meta -Informationen zum Anfangselement
Object : Meta -Info zu dann Endelement
string : Textinhalt
ID string : eindeutige ID

`highlighter.remove(id)`

Entfernen Sie (reinigen) einen hervorgehobenen Bereich durch seine eindeutige ID. Die ID wird standardmäßig von Web-Highlighter generiert. Sie können auch einen Haken für Ihre eigene Regel hinzufügen. Hooks doc hier.

`highlighter.removeAll()`

Entfernen Sie alle hervorgehobenen Bereiche, die zur Wurzel gehören.

`highlighter.addClass(className, id)`

Fügen Sie einen Klassennamen für hervorgehobene Bereiche (Wrap -Elemente) durch eindeutige ID hinzu. Sie können den Stil eines hervorgehobenen Bereichs mit dieser API ändern.

`highlighter.removeClass(className, id)`

Entfernen Sie den Klassennamen durch eindeutige ID. Es ist highlighter.addClass .

`highlighter.getDoms([id])`

Holen Sie sich alle Wickelknoten in einem hervorgehobenen Bereich. Ein hervorgehobener Bereich kann viele Segmente enthalten. Es wird alle DOM -Knoten zurückgegeben, die diese Segmente wickeln.

Wenn die id nicht weitergegeben wird, gibt sie alle Wickelknoten der Bereiche zurück.

`highlighter.getIdByDom(node)`

Wenn Sie einen DOM -Knoten haben, kann dies die eindeutige Highlight -ID für Sie zurückgeben. Beim Übergeben eines Nicht-Wrapper-Elements findet es den nächsten Vorfahren-Wrapper-Knoten.

`highlighter.getExtraIdByDom(node)`

Wenn Sie einen DOM -Knoten haben, kann dies die zusätzliche eindeutige Highlight -ID für Sie zurückgeben. Beim Übergeben eines Nicht-Wrapper-Elements findet es den nächsten Vorfahren-Wrapper-Knoten.

`highlighter.setOption(opt)`

Sie können diese API verwenden, um die Optionen des Textmarkers zu ändern. Die Struktur der Parameter entspricht dem des Konstruktors. Sie können teilweise Optionen übergeben.

4. Event -Hörer

Web-Highlighter verwenden Hörer, um die Ereignisse zu bewältigen.

z.B

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

Die Rückruffunktion empfängt drei Parameter:

Daten any : Ereignisdaten
Highlighter : aktuelle Highlighter -Instanz
E Event : Ein Ereignis wird vom Browser ausgelöst (z. B. Klick), Web-Highlighter enthüllt es

Highlighter.event ist EventType -Typ. Es enthält:

EventType.CLICK : Klicken Sie auf den hervorgehobenen Bereich
EventType.HOVER : Maus in den hervorgehobenen Bereich eingeben
EventType.HOVER_OUT : Maus lassen Sie den hervorgehobenen Bereich
EventType.CREATE : Es wird ein hervorgehobener Bereich erstellt
EventType.REMOVE : Ein hervorgehobener Bereich wird entfernt

Unterschiedliche Ereignisse haben unterschiedliche data . Attribute unten:

`EventType.CLICK`

Name	Beschreibung	Typ
`id`	Die Highlight -ID	Saite

`EventType.HOVER`

Name	Beschreibung	Typ
`id`	Die Highlight -ID	Saite

`EventType.HOVER_OUT`

Name	Beschreibung	Typ
`id`	Die Highlight -ID	Saite

`EventType.CREATE`

Kein Parameter e

Name	Beschreibung	Typ
`source`	`HighlightSource` das Objekt	Array
`type`	Der Grund zum Erstellen	Saite

source ist ein HighlightSource -Objekt. Es ist ein Objekt, das von Web-Highlighter erstellt wurde, wenn er hervorgehoben wird. Für die Persistenz in Backend (Datenbank) ist es erforderlich, eine Datenstruktur zu verwenden, die serialisiert werden kann ( JSON.stringify() ), um einen DOM -Knoten in Browsern darzustellen. HighlightSource ist die dafür entwickelte Datenstruktur.

type erklärt, warum ein hervorgehobener Bereich erstellt wird. Jetzt hat type zwei mögliche Werte: from-input und from-store . from-input zeigt, dass aufgrund der Auswahl des Benutzers ein hervorgehobener Bereich erstellt wird. from-store bedeutet es aus einem Speicher.

`EventType.REMOVE`

Kein Parameter e

Name	Beschreibung	Typ
`ids`	eine Liste der Highlight -ID	Array

5. Haken

Mit Haken können Sie den hervorgehobenen Fluss kraftvoll steuern. Sie können fast jede Logik per Haken anpassen. Weitere Informationen finden Sie im Vorab -Teil.

Kompatibilität

Es hängt von der Auswahl -API ab.

Dh 11
Rand
Firefox 52+
Chrom 15+
Safari 5.1+
Opera 15+

Mobile unterstützt: Erkennen Sie automatisch, ob mobile Geräte bei mobilen Geräten Touch -Ereignisse verwenden.

Vorauszahlung

Es bietet Ihnen einige Haken, damit das Hervorhebungsverhalten von Ihren eigenen besser gesteuert werden kann.

Um mehr über die Hooks zu erfahren, lesen Sie diesen Dokument.

Lizenz

MIT

Expandieren

Zusätzliche Informationen

Version v0.7.4
Typ Website-Daten
Aktualisierungszeit 2025-04-13
Größe 1.95MB
Kommt von Github

Ähnliche Anwendungen

web php

2024-11-06
Webstar-Forum

2011-12-06
WEB-FTP-System

2009-05-21
WEB

2009-04-28
WEB

2009-04-22
Sylvan Open Source Web

2009-04-20

web highlighter

Web Highlighter ? ️

Hintergrund

Installieren

Verwendung

Beispiel

Wie es funktioniert

Apis

1. Optionen

2. Statische Methoden

Highlighter.isHighlightSource(source)

Highlighter.isHighlightWrapNode($node)

3. Instanzmethoden

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)