README_CN.md

react-markdown-editor-lite

English Docs

和原版区别

• 调整了onImageUpload方法参数
• 支持额外的工具条左侧、右侧节点
• 分离html渲染样式，可自行引入
• 移除IE9的icon样式支持，减少样式文件大小
• 使用文字而非图标提示切换模式
• 模式切换按钮移到左侧，其他按钮移到右侧，移除同步预览模式

---

特性

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

案例

在线案例
https://harrychen0506.github.io/react-markdown-editor-lite/

默认配置

可插拔的功能键

安装

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

基本使用

基本使用分为以下几步：

• 导入react-markdown-editor-lite
• 注册插件（如果需要）
• 初始化任意Markdown解析器，例如markdown-it
• 开始使用

// 导入React、react-markdown-editor-lite，以及一个你喜欢的Markdown渲染器
import * as React from 'react'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
// 导入编辑器的样式
import 'react-markdown-editor-lite/lib/index.css';
// 导入html渲染样式
import 'react-markdown-editor-lite/lib/html.css';

// 注册插件（如果有的话）
// MdEditor.use(YOUR_PLUGINS_HERE);

// 初始化Markdown解析器
const mdParser = new MarkdownIt(/* Markdown-it options */);

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

• 更多参数和配置：点击这里查看
• API：点击这里查看
• 插件开发：点击这里查看
• 完整Demo见src/demo/index.tsx

在SSR（服务端渲染）中使用

如果你在使用一个服务端渲染框架，例如Next.js、Gatsby等，请对编辑器使用客户端渲染。

例如，Next.js有next/dynamic，Gatsby有loadable-components

下面是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 */}
    />
  )
}

浏览器引入

自1.1.0起，你可以在浏览器中使用script和link标签直接引入文件，并使用全局变量ReactMarkdownEditorLite。

你可以通过 进行下载。

注意：ReactMarkdownEditorLite(RMEL) 依赖 react，请确保其在RMEL之前引入。

例如，使用webpack时，你可以在页面中通过script引入ReactMarkdownEditorLite的JS文件，并在webpack配置中写：

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

更多示例

• 基本使用
• 在unform中使用
• 编写插件
• 替换默认图标

主要作者

• ShuangYa github/sylingd
• HarryChen0506 github/HarryChen0506

License

MIT