react editor

React-Editor est enfin retourné !!

Cela fait plus de 4 ans ...
Maintenant réactif est de retour avec entièrement TS & React-Hooks intégré

• Éditeur de texte riche avec TS & React-Hooks
• Solution de polyfill avec réact <16,8
• Place d'espace via CSS
• Méthodes: focus (), inserthtml (s), inserttext (s)
• Auto Saverange, RestoreRange, MoveToend
• Utilisation de la valeur / onChange, defaultValue / onchange
• Image in-web, fichier mangeledrop
• 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 }
/ > 

Accessoires

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

Pour UMD / <Script> Utilisation

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

Pour réagir <16,8, nous avons besoin de solution de contournement en polyfill hooks

 // todo

Pour la version héritée de React-Editor

npm i -S [email protected]

---

Ce projet a été botté avec Create-React-Library et React-TS-Demo.