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'
}

More demos

• Basic usage
• With unform
• Write a plugin
• Replace default icons

Authors

• ShuangYa github/sylingd
• HarryChen0506 github/HarryChen0506

License

MIT