react web highlight

React Web Highlighter ？§

豊富なテキストが強調表示されたノートは、強調表示されたテキストの永続的なストレージと復元をサポートするフロントエンドライブラリ

---

0。オンラインケース

私をクリックしてください私をクリックしてください

1。インスピレーション

次の2つの記事で提供されているアイデアをありがとう：

「スクライブハイライト」と「メモを挿入」 - フロントエンドの知識ポイント以上のもの

JSを使用して、「単語の強調表示」のオンラインノート関数を実装する方法は？ ？§

2。インストール

npm i react-web-highlighter

yarn add react-web-highlighter

3。使い方

 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。例

より複雑な使用例は、リポジトリのデモの例をご覧ください（フォルダーのexample ）

デモのインストールと実行中（現在TSDXを使用しています）：

1. プロジェクトルートディレクトリ：

 yarn

2. ディレクトリの例：

 yarn

3. プロジェクトルートディレクトリ：

 yarn start

4. ディレクトリの例：

 yarn start

5. 訪問：http：// localhost：1234

---

TextHighlightコンポーネントパラメーターの説明

• TextHighlightコンポーネントプロパティ

  パラメーター名	タイプ	説明する	必要ですか	デフォルト値
  テンプレート	string	リッチテキストHTML文字列	はい	--
  価値	INoteTextHighlightInfo[]	強調表示された選択データ	いいえ	--
  tagname	string	ラッピングの強調表示されたテキストのHTMLタグ名	いいえ	span
  ONADD	(data:INoteTextHighlightInfo)=>any	新しい選択を追加するときにトリガーされたコールバック	いいえ	--
  OnUpDate	(data:INoteTextHighlightInfo[])=>any	既存の選択が選択されたときにコールバックがトリガーされます（選択が重複するため、パラメーターは配列リストであり、現在選択されている選択をマークするすべてのノードを返します）	いいえ	--
  rowkey	string	各データの一意の値	いいえ	id
  モード	IModeProps[]	タイプと異なるタイプを区別してスタイルを設定するために使用されます	いいえ	--

• INoteTextHighlightInfo型属性：

  パラメーター名	タイプ	説明する	必要ですか
  リスト	INoteTextHighlightInfoItem[]	選択データ	はい
  文章	string	選択された選択されたテキストデータ	はい
  モード	string	現在のデータ型（たとえば：注、描画線など）	いいえ

• INoteTextHighlightInfoItem型属性：

  パラメーター名	タイプ	説明する	必要ですか
  レベル	number[]	選択レベルのデータ、上部ノードに応じてレイヤーごとに選択したテキストノードレイヤーまでドリルダウンします	はい
  始める	number	現在選択されている開始テキストノードのオフセット	はい
  終わり	string	現在選択されているエンドテキストノードのオフセット	はい
  文章	string	現在のテキストノードで選択されたテキスト	はい

• IModePropsタイププロパティ：

  パラメーター名	タイプ	説明する	必要ですか
  モード	string	タイプ	はい
  className	string	現在のタイプのクラス名を設定するために使用されます	はい

5.1ツールバーコンポーネントパラメーターの説明

ツールバーはテクサイライトの子要素として存在する必要があります

パラメーター名	タイプ	説明する	必要ですか	デフォルト値
マスク	boolean	マスクレイヤーを表示するかどうか	いいえ	真実
見える	boolean	ポップアップウィンドウの表示されるディスプレイを制御するために使用されます	いいえ	間違い
オートクロザブル	boolean	クリックしてチューブを自動的にトリガーします	いいえ	真実
wrapclassname	string	セットスタイル	いいえ	-
オンキャンセル	function	コールバックをオフにします	いいえ	-
子供たち	ReactNode	ポップアップウィンドウ内のサブエレメント	いいえ	-

6。メソッド

setSelectRangeメソッド：

パラメーター名	タイプ	説明する	必要ですか
ノード	INoteTextHighlightInfo	ネイティブのテキスト選択を設定する方法	はい

7。トッド

1. テストケースを書いてください
2. インタラクティブロジックを改善します