react web highlight

React Web Highlighter ? ️

풍부한 텍스트 강조 표시된 노트의 지속적인 저장 및 강조 표시된 텍스트 복원을 지원하는 프론트 엔드 라이브러리

---

0. 온라인 사례

나를 클릭하십시오

1. 영감

다음 두 기사에 제공된 아이디어에 감사드립니다.

"Scribing Highlight"및 "Insert Notes" - 단순한 프론트 엔드 지식 포인트 이상

"강조 표시"의 온라인 노트 기능을 구현하기 위해 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

---

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	스타일을 설정합니다	아니요	-
Oncancel	function	콜백을 시작하십시오	아니요	-
어린이들	ReactNode	팝업 창 내부의 하위 요소	아니요	-

6. 방법

setSelectRange 메소드 :

매개 변수 이름	유형	설명하다	필요합니까?
마디	INoteTextHighlightInfo	기본 텍스트 선택을 설정하는 방법	예

7. 할머니

1. 테스트 케이스를 작성하십시오
2. 대화식 논리를 향상시킵니다