README

react-markdown-editor-lite

中文说明

Differences with origin

change onImageUpload parameters
support for additional left and right nodes of the toolbar
separate html rendering styles, which can be imported by yourself
remove IE9 icon style support, reduce style file size
use text instead of icon for toggle mode
change mode toggle button to left, other buttons to right, and remove show_all mode

Feature

A light-weight(20KB zipped) Markdown editor of React component
Supports TypeScript
Supports custom markdown parser
Full markdown support
Supports pluggable function bars
Full control over UI
Supports image uploading and dragging
Supports synced scrolling between editor and preview

Demo

Online demo
https://harrychen0506.github.io/react-markdown-editor-lite/

Default configuration

Pluggable bars

Install

npm install react-markdown-editor-lite --save
# or
yarn add react-markdown-editor-lite

Basic usage

Following steps:

Import react-markdown-editor-lite
Register plugins if required
Initialize a markdown parser, such as markdown-it
Start usage

// import react, react-markdown-editor-lite, and a markdown parser you like
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
// import style manually
import 'react-markdown-editor-lite/lib/index.css';
// import html rendering style
import 'react-markdown-editor-lite/lib/html.css';

// Register plugins if required
// MdEditor.use(YOUR_PLUGINS_HERE);

// Initialize a markdown parser
const mdParser = new MarkdownIt(/* Markdown-it options */);

// Finish!
function handleEditorChange({html, text}) {
  console.log('handleEditorChange', html, text)
}
export default (props) => {
  return (
    <MdEditor
      style={{ height: "500px" }}
      renderHTML={(text) => mdParser.render(text)}
      onChange={handleEditorChange}
    />
  )
}

Props and configurations see here
APIs see here
Plugins developer see here
Full demo see src/demo/index.tsx

Usage in server-side render

If you are using a server-side render framework, like Next.js, Gatsby, please use client-side render for this editor.

For example, Next.js has next/dynamic, Gatsby has loadable-components

Following is a example for Next.js:

import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite/lib/index.css';

const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
  ssr: false
});

export default function() {
  return (
    <MdEditor
      style={{ height: "500px" }}
      renderHTML={/* Render function */}
    />
  )
}

Import in Browser

Since 1.1.0, You can add script and link tags in your browser and use the global variable ReactMarkdownEditorLite.

You can download these files directly from

Note: you should import react before ReactMarkdownEditorLite.

For example, in webpack, you import ReactMarkdownEditorLite by script tag in your page, and write webpack config like this:

externals: {
  react: 'React',
  'react-markdown-editor-lite': 'ReactMarkdownEditorLite'
}

@erda-ui/react-markdown-editor-lite

Usage no npm install needed!