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