react web highlight

React Web Highlighter ? Euen

Ein reichhaltiger Text markierte die Front-End-Bibliothek der Notizen, die anhaltende Speicherung und Wiederherstellung des hervorgehobenen Textes unterstützt

---

0. Online -Fälle

Klicken Sie auf mich, klicken Sie auf mich

1. Inspiration

Vielen Dank für die Ideen in den folgenden beiden Artikeln:

"Scribing Highlight" und "Notizen einfügen" - mehr als nur Front -End -Wissenspunkte

Wie kann ich JS verwenden, um die Online -Notizenfunktion "Hervorheben von Wörtern" zu implementieren? ? Euen

2. Installation

npm i react-web-highlighter

yarn add react-web-highlighter

3.. Wie man benutzt

 import React , { useCallback , useMemo , useState } from "react" ;
import TextHighlight from 'react-web-highlighter' ;

/** Tip: 如果划线木有效果，看看样式是否有添加 */

const template = "<p>我就是一段文本，想记录点什么，然而却又不知道从何时记录起，那就只能默默的埋藏在心底，生根发芽...</p>" ;

const App = ( ) => {
  const [ data , setState ] = useState < any > ( [ ] ) ;

  const modes = useMemo ( ( ) => {
    return [
      {
        className : "huaxian" ,
        mode : "huaxian" ,
        name : "划线" ,
      } ,
    ] ;
  } , [ ] ) ;

  const onAdd = useCallback (
    ( selectText ) => {
      const d = {
        ... selectText ,
        mode : 'huaxian' ,
        id : Math . random ( ) . toString ( ) . slice ( 2 )
      } ;
      data . push ( d ) ;
      setState ( [ ... data ] ) ;
    } ,
    [ data ]
  ) ;

  const onUpdate = useCallback (
    ( list = [ ] ) => {
      setState ( ( d : any ) => d ) ;
    } ,
    [ setState ]
  ) ;

  return (
    < TextHighlight
      value = { data }
      template = { template }
      modes = { modes }
      onAdd = { onAdd }
      onUpdate = { onUpdate }
    />
  ) ;
} ;

export default App ; 

4. Beispiel

Ein komplexeres Beispiel -Beispiel finden Sie im Demo -Beispiel des Repositorys (im example ).

Demo -Installation und Ausführen (derzeit mit TSDX):

1. Projekt Root Directory:

 yarn

2. Beispielverzeichnis:

 yarn

3. Projekt Root Directory:

 yarn start

4. Beispielverzeichnis:

 yarn start

5. Besuchen Sie: http: // localhost: 1234

---

5. TextHighlight -Komponenten Parameter Beschreibung

• TextHighlight -Komponenteneigenschaften

  Parametername	Typ	beschreiben	Ist es notwendig?	Standardwert
  Vorlage	string	Reicher Text HTML -Zeichenfolge	Ja	--
  Wert	INoteTextHighlightInfo[]	Markierte Auswahldaten	NEIN	--
  Tagname	string	HTML -Tag -Name für das Wickeln hervorgehobener Text	NEIN	span
  ONADD	(data:INoteTextHighlightInfo)=>any	Rückruf ausgelöst beim Hinzufügen einer neuen Auswahl	NEIN	--
  Onupdate	(data:INoteTextHighlightInfo[])=>any	Der Rückruf ausgelöst, wenn eine vorhandene Auswahl ausgewählt wird (da sich die Auswahl überlappt, sind die Parameter eine Array -Liste, die alle Knoten zurückgibt, die die aktuell ausgewählte Auswahl markieren).	NEIN	--
  Rowkey	string	Eindeutiger Wert für jede Daten	NEIN	id
  Modi	IModeProps[]	Wird verwendet, um zwischen Typen und verschiedenen Typen zu unterscheiden, um Stile festzulegen	NEIN	--

• INoteTextHighlightInfo -Attribut vom Typ:

  Parametername	Typ	beschreiben	Ist es notwendig?
  Liste	INoteTextHighlightInfoItem[]	Auswahldaten	Ja
  Text	string	Ausgewählte Textdaten in der Auswahl	Ja
  Modus	string	Aktueller Datentyp (z. B. Hinweise, Zeichnen von Zeilen usw.)	NEIN

• INoteTextHighlightInfoItem -TYPE -Attribut:

  Parametername	Typ	beschreiben	Ist es notwendig?
  Ebene	number[]	Daten aus Auswahlstufe, Bohren Sie nach dem oberen Knoten zur ausgewählten Textknotenschicht für Ebene herunter	Ja
  Start	number	Versatz des aktuell ausgewählten Starttextknotens	Ja
  Ende	string	Versatz des aktuell ausgewählten Endtextknotens	Ja
  Text	string	Der vom aktuelle Textknoten ausgewählte Text	Ja

• IModeProps Typeigenschaften:

  Parametername	Typ	beschreiben	Ist es notwendig?
  Modus	string	Typ	Ja
  Klassenname	string	Wird verwendet, um den Klassennamen des aktuellen Typs festzulegen	Ja

5.1 Parameterbeschreibung der Symbolleistenkomponenten

Die Symbolleiste muss als Kinderelement von TexHighlight existieren

Parametername	Typ	beschreiben	Ist es notwendig?	Standardwert
Maske	boolean	Ob die Maskenebene angezeigt werden soll	NEIN	WAHR
sichtbar	boolean	Wird verwendet, um das Display zu steuern, das Pop-up-Windows versteckt hat	NEIN	FALSCH
autoclosenbar	boolean	Klicken Sie hier, um das Röhrchen automatisch auszulösen	NEIN	WAHR
WrapClassName	string	Set Style	NEIN	-
Oncancel	function	Rufen Sie den Rückruf aus	NEIN	-
Kinder	ReactNode	Subelemente im Popup-Fenster	NEIN	-

6. Methode

setSelectRange -Methode:

Parametername	Typ	beschreiben	Ist es notwendig?
Knoten	INoteTextHighlightInfo	Methoden zur Festlegung der nativen Textauswahl	Ja

7. Todo

1. Testfälle schreiben
2. Interaktive Logik verbessern