It's been over 4 years...
Now react-editor is BACK with fully TS & REACT-HOOKS integrated
- Rich-text Editor with TS & React-hooks
- Polyfill workaround with React < 16.8
- Placeholder via CSS
- Methods: focus(), insertHTML(s), insertText(s)
- Auto saveRange, restoreRange, moveToEnd
- Usage of value/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-editorimport { 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; }for umd / <script> usage
<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);for react < 16.8 we need hooks polyfill workaround
// todofor react-editor legacy version
npm i -S react-editor@1.xThis project was bootstrapped with create-react-library & react-ts-demo.