Popularity
1.8
Growing
Activity
0.0
Stable
54
5
6
Programming language: TypeScript
react-editor alternatives and similar libraries
Based on the "Rich Text Editor" category.
Alternatively, view react-editor alternatives based on common mentions on social networks and blogs.
-
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
react-simple-code-editor
Simple no-frills code editor with syntax highlighting -
edtr-io
Edtr.io is an open source WYSIWYG in-line web editor written in React. Its plugin architecture makes Edtr.io lean and extensive at the same time. -
smartblock
intuitive block based wysiwyg editor built with React and ProseMirror
Appwrite - The Open Source Firebase alternative introduces iOS support
Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
Promo
appwrite.io
Do you think we are missing an alternative of react-editor or a related project?
README
react-editor is FINALLY RETURNED !!
It's been over 4 years... Now react-editor is BACK with fully TS & REACT-HOOKS integrated
- [x] Rich-text Editor with TS & React-hooks
- [ ] Polyfill workaround with React < 16.8
- [x] Placeholder via CSS
- [x] Methods: focus(), insertHTML(s), insertText(s)
- [x] Auto saveRange, restoreRange, moveToEnd
- [x] Usage of value/onChange, defaultValue/onChange
- [x] In-web-image, File handleDrop
- [ ] processHTML, processText wip
- [x] 1.x Legacy: https://github.com/fritx/react-editor/tree/1.x
- [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}
/>
Props
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
// todo
for react-editor legacy version
npm i -S [email protected]
This project was bootstrapped with create-react-library & react-ts-demo.