react web highlight

React Web Highlighter ? ️

Teks Kaya Sorotan Pustaka Front-End yang mendukung penyimpanan dan pemulihan teks yang disorot terus-menerus

---

0. Kasus online

Klik saya klik saya

1. Inspirasi

Terima kasih banyak atas ide -ide yang disediakan dalam dua artikel berikut:

"Sorotan Scribing" dan "Sisipkan Catatan" - Lebih dari sekadar titik pengetahuan front -end

Bagaimana cara menggunakan JS untuk mengimplementasikan fungsi catatan online "menyoroti kata -kata"? ? ️

2. Instalasi

npm i react-web-highlighter

yarn add react-web-highlighter

3. Cara menggunakan

 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. Contoh

Contoh penggunaan yang lebih kompleks, lihat contoh demo repositori (di folder example )

Instalasi dan berjalan demo (saat ini menggunakan TSDX):

1. Direktori Root Proyek:

 yarn

2. Contoh Direktori:

 yarn

3. Direktori Root Proyek:

 yarn start

4. Contoh Direktori:

 yarn start

5. Kunjungi: http: // localhost: 1234

---

5. Deskripsi Parameter Komponen TextHighlight

• Properti Komponen TextHighlight

  Nama Parameter	jenis	menggambarkan	Apakah perlu	nilai default
  templat	string	String html teks kaya	Ya	--
  nilai	INoteTextHighlightInfo[]	Data seleksi yang disorot	TIDAK	--
  Tagname	string	Nama tag HTML untuk pembungkus teks yang disorot	TIDAK	span
  onadd	(data:INoteTextHighlightInfo)=>any	Panggilan balik dipicu saat menambahkan pilihan baru	TIDAK	--
  onupdate	(data:INoteTextHighlightInfo[])=>any	Callback yang dipicu ketika pilihan yang ada dipilih (karena pilihan akan tumpang tindih, parameter adalah daftar array, yang akan mengembalikan semua node yang menandai pilihan yang saat ini dipilih)	TIDAK	--
  Rowkey	string	Nilai unik untuk setiap data	TIDAK	id
  mode	IModeProps[]	Digunakan untuk membedakan antara jenis dan jenis yang berbeda untuk mengatur gaya	TIDAK	--

• Atribut tipe INoteTextHighlightInfo :

  Nama Parameter	jenis	menggambarkan	Apakah perlu
  daftar	INoteTextHighlightInfoItem[]	Data Seleksi	Ya
  teks	string	Data teks yang dipilih dalam pemilihan	Ya
  mode	string	Tipe data saat ini (misalnya: catatan, garis gambar, dll.)	TIDAK

• Atribut tipe INoteTextHighlightInfoItem :

  Nama Parameter	jenis	menggambarkan	Apakah perlu
  tingkat	number[]	Data level seleksi, bor ke bawah ke lapisan node teks yang dipilih berdasarkan lapisan sesuai dengan node atas	Ya
  awal	number	Offset dari simpul teks start yang saat ini dipilih	Ya
  akhir	string	Offset dari simpul teks akhir yang saat ini dipilih	Ya
  teks	string	Teks yang dipilih oleh node teks saat ini	Ya

• Properti Tipe IModeProps :

  Nama Parameter	jenis	menggambarkan	Apakah perlu
  mode	string	jenis	Ya
  ClassName	string	Digunakan untuk mengatur nama kelas dari jenis saat ini	Ya

5.1 Deskripsi Parameter Komponen Toolbar

Toolbar perlu ada sebagai elemen anak dari Texthighlight

Nama Parameter	jenis	menggambarkan	Apakah perlu	nilai default
masker	boolean	Apakah akan menampilkan lapisan topeng	TIDAK	BENAR
bisa dilihat	boolean	Digunakan untuk mengontrol tampilan yang tersembunyi dari jendela pop-up	TIDAK	PALSU
Autoclosable	boolean	Klik untuk memicu tabung secara otomatis	TIDAK	BENAR
WrapClassName	string	Set gaya	TIDAK	-
Oncancel	function	Lepaskan panggilan balik	TIDAK	-
anak-anak	ReactNode	Sub-elemen di dalam jendela pop-up	TIDAK	-

6. Metode

Metode setSelectRange :

Nama Parameter	jenis	menggambarkan	Apakah perlu
node	INoteTextHighlightInfo	Metode untuk mengatur pemilihan teks asli	Ya

7. TODO

1. Tulis kasus tes
2. Meningkatkan logika interaktif