node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

react-marked-editor

react-marked-editor

A markdown editor written by React

version

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