react editor

React-editor akhirnya dikembalikan !!

Sudah lebih dari 4 tahun ...
Sekarang React-Editor kembali dengan TS & react-hooks sepenuhnya terintegrasi

• Editor Rich-Text dengan TS & React-Hooks
• Solusi Polyfill dengan React <16.8
• Placeholder melalui CSS
• Metode: fokus (), inserthtml (s), insertText (s)
• Auto Saverange, Restorearing, Movetoend
• Penggunaan Nilai/Onchange, DefaultValue/Onchange
• In-Web-Image, File Handledrop
• ProcessHtml, ProcessText WIP
• 1.x Legacy: https://github.com/fritx/react-editor/tree/1.x
• 2.0-alpha demo: 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 }
/ > 

Alat peraga

 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 ;
}

untuk UMD / <Script> penggunaan

 < 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 ) ;

Untuk bereaksi <16,8 kita membutuhkan solusi Polyfill kait

 // todo

untuk versi warisan reaksi-editor

npm i -S [email protected]

---

Proyek ini bootstrap dengan create-react-library & react-ts-demo.