lovasoa / React Contenteditable
Licence: apache-2.0
React component for a div with editable contents
Stars: ✭ 1,057
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Contenteditable
React Sane Contenteditable
React component with sane defaults to make any element contentEditable
Stars: ✭ 45 (-95.74%)
Mutual labels: contenteditable, react-component
React Text Loop
Animate words in your headings
Stars: ✭ 595 (-43.71%)
Mutual labels: text, react-component
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-73.32%)
Mutual labels: text, wysiwyg
Awesome Wysiwyg
A curated list of awesome WYSIWYG editors.
Stars: ✭ 1,801 (+70.39%)
Mutual labels: contenteditable, wysiwyg
Wysiwyg.js
wysiwyg contenteditable editor (minified+compression: 6kb)
Stars: ✭ 520 (-50.8%)
Mutual labels: contenteditable, wysiwyg
Sceditor
A lightweight HTML and BBCode WYSIWYG editor
Stars: ✭ 503 (-52.41%)
Mutual labels: contenteditable, wysiwyg
ember-pell
Ember addon for simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies
Stars: ✭ 56 (-94.7%)
Mutual labels: contenteditable, wysiwyg
Awesome Medium Editor
Medium.com WYSIWYG editor clone, with RTL support.
Stars: ✭ 12 (-98.86%)
Mutual labels: contenteditable, wysiwyg
Medium Editor
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
Stars: ✭ 15,421 (+1358.94%)
Mutual labels: contenteditable, wysiwyg
am-editor
A rich text collaborative editor framework that can use React and Vue custom plug-ins. 一个富文本实时协同编辑器框架,可以使用React和Vue自定义插件。
Stars: ✭ 542 (-48.72%)
Mutual labels: contenteditable, wysiwyg
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+1002.46%)
Mutual labels: contenteditable, wysiwyg
Ananas
An easy image editor integration for your Android apps.
Stars: ✭ 186 (-82.4%)
Mutual labels: text, editing
Ckeditor5
Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
Stars: ✭ 5,406 (+411.45%)
Mutual labels: contenteditable, wysiwyg
Ckeditor4
The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.
Stars: ✭ 5,502 (+420.53%)
Mutual labels: contenteditable, wysiwyg
Megadraft
Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility
Stars: ✭ 982 (-7.1%)
Mutual labels: contenteditable, wysiwyg
Prosemirror Math
Schema and plugins for "first-class" math support in ProseMirror!
Stars: ✭ 43 (-95.93%)
Mutual labels: wysiwyg
react-contenteditable
React component for a div with editable contents
Install
npm install react-contenteditable
Usage
import React from 'react'
import ContentEditable from 'react-contenteditable'
class MyComponent extends React.Component {
constructor() {
super()
this.contentEditable = React.createRef();
this.state = {html: "<b>Hello <i>World</i></b>"};
};
handleChange = evt => {
this.setState({html: evt.target.value});
};
render = () => {
return <ContentEditable
innerRef={this.contentEditable}
html={this.state.html} // innerHTML of the editable div
disabled={false} // use true to disable editing
onChange={this.handleChange} // handle innerHTML change
tagName='article' // Use a custom HTML tag (uses a div by default)
/>
};
};
Available props
prop | description | type |
---|---|---|
innerRef | element's ref attribute
|
Object | Function |
html | required: innerHTML of the editable element | String |
disabled | use true to disable editing | Boolean |
onChange | called whenever innerHTML changes |
Function |
onBlur | called whenever the html element is blurred | Function |
onFocus | event fires when an element has received focus | Function |
onKeyUp | called whenever a key is released | Function |
onKeyDown | called whenever a key is pressed | Function |
className | the element's CSS class | String |
style | a collection of CSS properties to apply to the element | Object |
Known Issues
If you are using hooks, please see this issue. Using this component with useState
doesn't work, but you can still use useRef
:
const text = useRef('');
const handleChange = evt => {
text.current = evt.target.value;
};
const handleBlur = () => {
console.log(text.current);
};
return <ContentEditable html={text.current} onBlur={handleBlur} onChange={handleChange} />
Examples
You can try react-contenteditable right from your browser to see if it fits your project's needs:
-
Simple example : just an editable
<div>
with a default value. - Advanced example : custom tag, input sanitization, and rich text edition.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].