react-wysiwyg

Simple React component for a rich editor text and the conversion to render HTML

Install

npm install mx-react-wysiwyg --save

Example

import { Wysiwyg, ConvertToHTML } from "mx-react-wysiwyg";
import 'semantic-ui-css/semantic.min.css';

class App extends Component {

  constructor(){
    super()
    this.state = {
      content: null
    }
  }

  updateValue(content){
    this.setState({content})
  }

  render {

    const { content } = this.state

    return (
      <div>
      <Wysiwyg
        onChange={this.updateValue.bind(this)}
        value={this.state.value}
      />

      <ConvertToHTML
        html={this.state.value}
      />
      </div>
    );
  }
}

Props

Wysiwyg props

| |Format|Required|What it does ?| |-------|-------|-------|-------| |onChange|{function}| YES | Takes a function that return the content of the editor |value|Object| NO | You can make Wysiwyg a controlled component by giving it a draft-js map value |bold|Bool| NO | default to true pass it to false to disable bold style |underline|Bool| NO | default to true pass it to false to disable underline style |italic|Bool| NO | default to true pass it to false to disable italic style |h1, h2, h3, h4, h5, h6|Bool| NO | default to true pass it to false to disable h1, etc... style |blockQuote|Bool| NO | default to true pass it to false to disable blockquote style |list|Bool| NO | default to true pass it to false to disable list style |numberedList|Bool| NO | default to true pass it to false to disable list numbered style |code|Bool| NO | default to true pass it to false to disable code style

ConvertToHTML props

| |Format|Required|What it does ?| |-------|-------|-------|-------| |html|Object| YES | Object from the Wysiwyg editor

Contributors

• Francois Aubeut (@MeXaaR)

MIT Licensed