Popularity
1.7
Declining
Activity
0.0
Stable
55
6
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 backend cloud platform
The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file 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.