react-simple-contenteditable

A simple contenteditable component

Why?

ContentEditable has some known issues, the purpose of this component is to avoid some of its problems:

• Enable "plaintext-only" for most browsers;
• Prevent cursor jumping to the beginning of the field;

Example

import React, { Component } from 'react';
import ContentEditable from 'react-simple-contenteditable';
 
class App extends Component {
  constructor (props) {
    super(props);
 
    this.state = {
      title: "Title here"
    }
 
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange (ev, value) {
    this.setState({
      title: value
    })
  }
 
  render() {
    return (
      <div className="App">
        <ContentEditable
          html={this.state.title}
          className="my-class"
          tagName="h1"
          onChange={ this.handleChange }
          contentEditable="plaintext-only"
        />
      </div>
    );
  }
}
 

License

Copyright (c) 2018 Raphael Cavalcanti, contributors.

Released under the MIT license.

Screenshots are CC BY-SA (Attribution-ShareAlike).