react-marked-editor

A markdown editor written by React

The editor is powered by CodeMirror, and the markdown transcoder is powered by marked

Installation

$ npm install react-marked-editor

Usage

Firstly, add styled-jsx/babel to plugins in your babel configuration:

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

Next, add font-awesome less/css files and font files to your project, and add some loaders to your webpack configuration:

{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader'
},
{
    test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
    loader: 'file-loader?name=[name].[ext]'
}

Add font-awesome less/css file import to your entry code:

import './path/to/font-awesome.(less|css)';

Finally, use the component in your code:

import ReactMarkedEditor from 'react-marked-editor';
//...
render() {
  return (
    <div>
      <ReactMarkedEditor initialMarkdown={md}/>
    </div>
  );
}

//show readonly markdown view
import { ReactMarkedView } from 'react-marked-editor';
//...
render() {
  return (
    <div>
      <ReactMarkedView markdown={md}/>
    </div>
  );
}

//get codeMirror instance
<ReactMarkedEditor ref={editor = this.editor = editor} {...otherProps}/>
//in somewhere
const codeMirror = this.editor.codeDoc;

API Doc

ReactMarkedEditor

| props | type | detail | |------------------------|----------|--------------------------------------------------------------------| | initialMarkdown | string | the initial markdown string to show | | onChange | function | editor content change event, args -> (newValue) | | markdownClassName | string | className pass to ReactMarkedView inside ReactMarkedEditor | | markdownStyle | object | styles object pass to ReactMarkedView inside ReactMarkedEditor | | editorHeight | number | height of editor (exclude toolbar) | | hideToolbar | boolean | do not show the toolbar | | style | object | set styles to root element of ReactMarkedEditor | | className | string | set className to root element of ReactMarkedEditor | | openLinkInBlank | boolean | whether open link in blank window/tab pass to ReactMarkedView | | markedOptions | object | options pass to marked | | toolbarCustomButtons | array | custom buttons add to toolbar, properties of child listed below ⬇︎ | | ↳ title | string | the title property of button element | | ↳ icon | string | the class name of Font Awesome icon | | ↳ onClick | function | click callback, args -> (codeMirror, event) |

ReactMarkedView

| props | type | detail | |------------------------|----------|--------------------------------------------------------------------| | markdown | string | the initial markdown string to transcode | | markdownClass | string | the className pass to root element to override the default style | | markedOptions | object | options pass to marked | | style | object | set styles to root element of ReactMarkedView | | className | string | set className to root element of ReactMarkedView | | openLinkInBlank | boolean | whether open link in blank window/tab |

Demo

Clone the repo

$ git clone https://github.com/lonord/react-marked-editor.git

Install dependencies

$ npm i

And run

$ npm start

License

MIT