react-marked-editor v1.5.4

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

ReactMarkedView

Demo

Clone the repo

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

Install dependencies

$ npm i

And run

$ npm start

License

MIT