react-markdown-editor-hybrid

Demo

Install Using NPM

npm install --save react-markdown-editor-hybrid

import MDEditor from 'react-markdown-editor-hybrid';

Features

• Bold, italics, header, ordered/unordered lists, code block, link, image, and YouTube buttons.
• Quote block HTML button.
• Clicking an editor button with no text selected will position the cursor where you can start typing with formatted Markdown.
• Preview mode rendered with react-markdown.

Example Usage

var Component = React.createClass({
  getInitialState(){
    return {
      value: ''
    };
  },
  render:function(){
    return (
      <MDEditor value={this.state.value} onChange={(e)=>this.setState({value: e})} />
    );
  }
});

Props

• value: Provides state to the editor. Required.
• onChange: Fires when text input has changed. Required.
• enableHTML: Enables the blockquote button, and HTML rendering in the react-markdown preview. Default is true. Optional.
• textAreaStyle: Assigns style properties to the text area. Optional.
• buttonStyle: Assigns style properties to the button elements. Optional.
• buttonContainerStyle: Assigns style properties to the buttons container. Optional.