react editor

React-Editor wird endlich zurückgegeben !!

Es ist über 4 Jahre her ...
Jetzt ist React-Editor mit vollständig integrierten TS & React-Hooks zurück

• Rich-Text-Editor mit TS & React-Hooks
• Polyfill -Problemumgehung mit React <16,8
• Platzhalter über CSS
• Methoden: Focus (), Inserthtml (s), InsertText (en)
• Auto Saverange, Restorerange, MoveToend
• Nutzung von Wert/Onchange, StandardValue/OnChange
• In-Web-Image, Datei Handledrop
• proceshtml, 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 }
/ > 

Requisiten

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

Für UMD / <Script> Verwendung

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

Für React <16.8 brauchen wir Hooks Polyfill -Problemumgehung

 // todo

Für die React-Eduitor-Legacy-Version

npm i -S [email protected]

---

Dieses Projekt wurde mit Create-React-Bibliothek & React-TS-Demo gestapft.