Popularity
1.7
Stable
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
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.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.