Skip to content

A text editor component supporting Markdown and HTML using react-markdown.

License

Notifications You must be signed in to change notification settings

jaszhix/react-markdown-editor-hybrid

Repository files navigation

NPM Version Downloads Dependency Status License

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.

About

A text editor component supporting Markdown and HTML using react-markdown.

Resources

License

Stars

Watchers

Forks

Packages

No packages published