ดาวน์โหลด react web highlight - react web highlight ซอร์สโค้ดดาวน์โหลดซอร์สโค้ด

react web highlight

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

`React Web Highlighter` ? ️

ข้อความที่หลากหลายไฮไลต์โน้ตไลบรารีส่วนหน้าซึ่งรองรับการจัดเก็บอย่างต่อเนื่องและการคืนค่าข้อความไฮไลต์

0. กรณีออนไลน์

คลิกฉันคลิกฉัน

1. แรงบันดาลใจ

ขอบคุณมากสำหรับความคิดที่มีให้ในสองบทความต่อไปนี้:

"ไฮไลท์การเขียน Scribing" และ "แทรกโน้ต" - มากกว่าเพียงแค่คะแนนความรู้ส่วนหน้า

วิธีใช้ 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):

ไดเรกทอรีรากโครงการ:

 yarn

ตัวอย่างไดเรกทอรี:

 yarn

ไดเรกทอรีรากโครงการ:

 yarn start

ตัวอย่างไดเรกทอรี:

 yarn start

เยี่ยมชม: http: // localhost: 1234

5. คำอธิบายพารามิเตอร์ส่วนประกอบ `TextHighlight` คำอธิบาย

คุณสมบัติองค์ประกอบของ TextHighlight

ชื่อพารามิเตอร์	พิมพ์	อธิบาย	จำเป็นหรือไม่	ค่าเริ่มต้น
เทมเพลต	`string`	สตริง HTML ข้อความที่อุดมไปด้วย	ใช่	`--`
ค่า	`INoteTextHighlightInfo[]`	ข้อมูลการเลือกที่เน้น	เลขที่	`--`
แท็กชื่อ	`string`	ชื่อแท็ก HTML สำหรับการห่อข้อความไฮไลต์	เลขที่	`span`
onadd	`(data:INoteTextHighlightInfo)=>any`	การโทรกลับทริกเกอร์เมื่อเพิ่มการเลือกใหม่	เลขที่	`--`
onUpdate	`(data:INoteTextHighlightInfo[])=>any`	การเรียกกลับทริกเกอร์เมื่อเลือกการเลือกที่มีอยู่ (เนื่องจากการเลือกจะทับซ้อนกันพารามิเตอร์เป็นรายการอาร์เรย์ซึ่งจะส่งคืนโหนดทั้งหมดที่ทำเครื่องหมายการเลือกที่เลือกในปัจจุบัน)	เลขที่	`--`
แถว	`string`	ค่าที่ไม่ซ้ำกันสำหรับแต่ละข้อมูล	เลขที่	`id`
โหมด	`IModeProps[]`	ใช้เพื่อแยกความแตกต่างระหว่างประเภทและประเภทต่าง ๆ เพื่อกำหนดสไตล์	เลขที่	`--`

แอตทริบิวต์ประเภท INoteTextHighlightInfo :

ชื่อพารามิเตอร์	พิมพ์	อธิบาย	จำเป็นหรือไม่
รายการ	`INoteTextHighlightInfoItem[]`	ข้อมูลการเลือก	ใช่
ข้อความ	`string`	ข้อมูลข้อความที่เลือกในการเลือก	ใช่
โหมด	`string`	ชนิดข้อมูลปัจจุบัน (ตัวอย่างเช่น: หมายเหตุ, เส้นวาด ฯลฯ )	เลขที่

แอตทริบิวต์ประเภท INoteTextHighlightInfoItem :

ชื่อพารามิเตอร์	พิมพ์	อธิบาย	จำเป็นหรือไม่
ระดับ	`number[]`	ข้อมูลระดับการเลือกเจาะลงไปที่เลเยอร์โหนดข้อความที่เลือกโดยเลเยอร์ตามโหนดด้านบน	ใช่
เริ่ม	`number`	ชดเชยโหนดข้อความเริ่มต้นที่เลือกในปัจจุบัน	ใช่
จบ	`string`	ชดเชยโหนดข้อความปลายทางที่เลือกในปัจจุบัน	ใช่
ข้อความ	`string`	ข้อความที่เลือกโดยโหนดข้อความปัจจุบัน	ใช่

คุณสมบัติประเภท IModeProps :

ชื่อพารามิเตอร์	พิมพ์	อธิบาย	จำเป็นหรือไม่
โหมด	`string`	พิมพ์	ใช่
ชื่อชั้นเรียน	`string`	ใช้เพื่อตั้งค่าชื่อคลาสของประเภทปัจจุบัน	ใช่

5.1 คำอธิบายพารามิเตอร์ส่วนประกอบของแถบเครื่องมือ

แถบเครื่องมือต้องมีอยู่เป็นองค์ประกอบเด็กของ TexThighlight

ชื่อพารามิเตอร์	พิมพ์	อธิบาย	จำเป็นหรือไม่	ค่าเริ่มต้น
หน้ากาก	`boolean`	ไม่ว่าจะแสดงเลเยอร์หน้ากาก	เลขที่	จริง
มองเห็นได้	`boolean`	ใช้เพื่อควบคุมจอแสดงผลที่ซ่อนอยู่ของหน้าต่างป๊อปอัพ	เลขที่	เท็จ
ที่ได้รับสารกันน้ำ	`boolean`	คลิกเพื่อเรียกใช้หลอดโดยอัตโนมัติ	เลขที่	จริง
WrapClassName	`string`	ตั้งสไตล์	เลขที่	-
เนื้องอก	`function`	ตั้งค่าการโทรกลับ	เลขที่	-
เด็ก	`ReactNode`	องค์ประกอบย่อยภายในหน้าต่างป๊อปอัพ	เลขที่	-

6. วิธีการ

setSelectRange วิธี:

ชื่อพารามิเตอร์	พิมพ์	อธิบาย	จำเป็นหรือไม่
โหนด	`INoteTextHighlightInfo`	วิธีการตั้งค่าการเลือกข้อความดั้งเดิม	ใช่