Skip to content
a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is 11 commits behind HarryChen0506:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
image
src
test
.browserslistrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.prettierrc
.travis.yml
.yarnrc
LICENSE
README.md
README_CN.md
nowa.config.js
package.json
postcss.config.js
tsconfig.json
tslint.json
webpack.overwrite.js
yarn.lock

README.md

react-markdown-editor-lite

NPM package NPM downloads MIT License

中文文档

  • 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
  • 一款轻量的基于React的Markdown编辑器, 压缩后代码只有20KB
  • 支持TypeScript
  • 支持自定义Markdown解析器
  • 支持常用的Markdown编辑功能,如加粗,斜体等等...
  • 支持插件化的功能键
  • 界面可配置, 如只显示编辑区或预览区
  • 支持图片上传或拖拽
  • 支持编辑区和预览区同步滚动

Demo

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

Default configuration

image

Pluggable bars

image

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

// 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
      value=""
      renderHTML={(text) => mdParser.render(text)}
      onChange={handleEditorChange}
      />
  )
}

Usage in 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 (      
    <div style="height: 500px">
      <MdEditor
        value=""
        renderHTML={/* Render function */}
      />                
    </div>
  )
}

More

Authors

License

MIT

You can’t perform that action at this time.