ashleyw / React Sane Contenteditable
Licence: mit
React component with sane defaults to make any element contentEditable
Stars: ✭ 45
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Sane Contenteditable
ember-pell
Ember addon for simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies
Stars: ✭ 56 (+24.44%)
Mutual labels: contenteditable, text-editor
React Contenteditable
React component for a div with editable contents
Stars: ✭ 1,057 (+2248.89%)
Mutual labels: contenteditable, react-component
am-editor
A rich text collaborative editor framework that can use React and Vue custom plug-ins. 一个富文本实时协同编辑器框架,可以使用React和Vue自定义插件。
Stars: ✭ 542 (+1104.44%)
Mutual labels: contenteditable, text-editor
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+25795.56%)
Mutual labels: text-editor, contenteditable
Wysiwyg.js
wysiwyg contenteditable editor (minified+compression: 6kb)
Stars: ✭ 520 (+1055.56%)
Mutual labels: text-editor, contenteditable
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-35.56%)
Mutual labels: react-component
Steam Review Editor
Easily create, format and preview your Steam reviews in real-time
Stars: ✭ 14 (-68.89%)
Mutual labels: text-editor
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 (+2082.22%)
Mutual labels: contenteditable
React Animated Weather
Animated weather component for React inspired by Skycons http://darkskyapp.github.io/skycons/ ☀️
Stars: ✭ 34 (-24.44%)
Mutual labels: react-component
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+2013.33%)
Mutual labels: react-component
React Markdown Preview
React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.
Stars: ✭ 34 (-24.44%)
Mutual labels: react-component
React Prismazoom
A pan and zoom component for React, using CSS transformations.
Stars: ✭ 29 (-35.56%)
Mutual labels: react-component
Spicy Datatable
React.js datatables without jQuery. Smart react datatable that includes search, pagination and localization.
Stars: ✭ 36 (-20%)
Mutual labels: react-component
React Absolute Grid
An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
Stars: ✭ 910 (+1922.22%)
Mutual labels: react-component
Femto
A toy text editor with no dependencies written in Ruby
Stars: ✭ 34 (-24.44%)
Mutual labels: text-editor
Angular Contenteditable Accessor
This accessor allows you to use Angular forms with contenteditable elements with ease. It has zero dependencies, other than Angular itself as peer and works with Angular 4+ in all modern browsers, including Internet Explorer 11
Stars: ✭ 34 (-24.44%)
Mutual labels: contenteditable
react-sane-contenteditable
React component with sane defaults to make any element contentEditable
https://jsfiddle.net/zp2v824s/show
DEMO:Why?
ContentEditable has some well known issues, and the purpose of this component is to deal with them in a sane manner so we don't have to continue re-inventing the wheel! 🔥
- Clean and sanitise the output
- Remove rich text formatting when pasting
- Prevent the cursor from jumping around
Example
import React, { Component } from 'react';
import ContentEditable from 'react-sane-contenteditable';
class App extends Component {
constructor(props) {
super(props);
this.state = {
title: 'Title here',
};
}
handleChange = (ev, value) => {
this.setState({ title: value });
};
render() {
return (
<div className="App">
<ContentEditable
tagName="h1"
className="my-class"
content={this.state.title}
editable={true}
maxLength={140}
multiLine={false}
onChange={this.handleChange}
/>
</div>
);
}
}
Develop
Tests
yarn test
Linting
yarn run lint
Dev
Runs the rollup dev server with file watching on both the src and demo
yarn run dev
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].