react editor

반응 편집자가 마침내 반환됩니다 !!

4 년이 넘었습니다 ...
이제 React-Editor가 완전히 TS & React-Hooks 통합으로 돌아 왔습니다.

• TS & React-Hooks의 풍부한 텍스트 편집기
• 반응 <16.8을 사용한 폴리 필수 해결
• CSS를 통한 자리 표시 자
• 방법 : Focus (), InserThtml (S), InsertText (S)
• 자동 Saverange, Restorerange, Movetoend
• 값/onchange 사용, DefaultValue/OnChange
• Web-Image, 파일 처리 로프
• ProcessHtml, ProcessText WIP
• 1.x 레거시 : https://github.com/fritx/react-editor/tree/1.x
• 2.0-alpha 데모 : https://fritx.github.io/react-editor

npm i -S react-editor

 import { Editor } from 'react-editor'

let [ value , setValue ] = useState ( '' )
let ref = useRef ( )

ref . focus ( )
ref . insertText ( 'foo' )
ref . insertHTML ( '<img src="https://foo.bar/baz.png">' )
value = 'set content'

< Editor
  ref = { ref }
  placeholder = "Type message to send..."
  className = { styles . editor }
  value = { value }
  onChange = { setValue }
/ > 

소품

 export interface EditorProps {
  value ?: string ;
  defaultValue ?: string ;
  className ?: string ;
  placeholder ?: string ;
  allowInWebDrop ?: boolean ;
  processHTML ?: ( html : string ) => string ;
  processText ?: ( text : string ) => string ;
  onFocus ?: ( e : React . FocusEvent < HTMLDivElement > ) => void ;
  onBlur ?: ( e : React . FocusEvent < HTMLDivElement > ) => void ;
  onDrop ?: ( e : React . DragEvent < HTMLDivElement > ) => void ;
  onPaste ?: ( e : React . ClipboardEvent < HTMLDivElement > ) => void ;
  onChange ?: ( value : string ) => void ;
  [ restProp : string ] : any ; // onto <div>
}

export interface EditorRefAttrs {
  focus : ( ) => void ;
  insertHTML : ( html : string ) => void ;
  insertText : ( text : string ) => void ;
}

UMD / <cript> 사용법

 < script src =" https://unpkg.com/react " > </ script >
< script src =" https://unpkg.com/react-dom " > </ script >
< script src =" https://unpkg.com/react-editor " > </ script >
< script src =" myapp.js " > </ script > 

 // myapp.js
let React = window . React ;
let ReactDOM = window . ReactDOM ;
let { Editor } = window . ReactEditor ;

ReactDOM . render ( < Editor /> , mountNode ) ;

REACT <16.8의 경우 Hooks PolyFill 해결 방법이 필요합니다

 // todo

React-Editor 레거시 버전의 경우

npm i -S [email protected]

---

이 프로젝트는 Create-React-Library & React-TS-Demo와 함께 부트 스트랩되었습니다.