react-markdown-editor-lite：轻量级 React Markdown 编辑器

本文介绍 react-markdown-editor-lite，一款轻量级的 React Markdown 编辑器组件。该项目提供了完整的 Markdown 编辑功能，支持 TypeScript、自定义解析器、插件扩展以及图片上传等功能，帮助开发者快速集成 Markdown 编辑能力到 React 应用中。

项目简介

react-markdown-editor-lite 是一个开源的 React Markdown 编辑器组件，由 HarryChen0506 和 ShuangYa 开发维护。截至目前，该项目在 GitHub 上已获得 1.1k+ stars。该编辑器设计轻量，不绑定特定的 Markdown 解析器，开发者可以根据需要自由选择 markdown-it 或其他解析器。

核心特性

轻量级设计：基于 React 组件，体积小巧，性能优秀
TypeScript 支持：完整的类型定义，提供良好的开发体验
自定义解析器：不绑定特定解析器，支持 markdown-it 等任意解析器
完整 Markdown 支持：支持加粗、斜体、代码块、表格等常用语法
插件化架构：功能栏支持插件扩展，可自定义编辑功能
UI 完全可控：可配置只显示编辑区或预览区，灵活适应不同场景
图片上传支持：支持图片上传和拖拽插入
同步滚动：编辑区和预览区支持同步滚动

安装指南

使用 npm/pnpm/yarn 安装

bash

# 使用 npm
npm install react-markdown-editor-lite --save

# 或使用 pnpm
pnpm add react-markdown-editor-lite

# 或使用 yarn
yarn add react-markdown-editor-lite

依赖说明

该组件需要以下 peer dependencies：

React >= 16.8
一个 Markdown 解析器（如 markdown-it）

快速开始

基础用法

jsx

import React from 'react';
import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite';
import 'react-markdown-editor-lite/lib/index.css';

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

function handleEditorChange({ html, text }) {
  console.log('HTML:', html);
  console.log('Markdown:', text);
}

export default function Editor() {
  return (
    <MdEditor
      style={{ height: '500px' }}
      renderHTML={text => mdParser.render(text)}
      onChange={handleEditorChange}
    />
  );
}

使用插件

jsx

import MdEditor from 'react-markdown-editor-lite';
import Plugins from 'react-markdown-editor-lite/lib/plugins';

// 注册插件
MdEditor.use(Plugins.Header);
MdEditor.use(Plugins.FontStrikethrough);
MdEditor.use(Plugins.ListUnordered);
MdEditor.use(Plugins.ListOrdered);

// 然后在组件中使用

服务端渲染支持

对于 Next.js、Gatsby 等支持服务端渲染的框架，需要使用客户端渲染方式加载编辑器。

Next.js 示例

jsx

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 Editor() {
  return (
    <MdEditor
      style={{ height: '500px' }}
      renderHTML={text => mdParser.render(text)}
    />
  );
}

带插件的 Next.js 示例

jsx

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

const MdEditor = dynamic(
  () => {
    return new Promise(resolve => {
      Promise.all([
        import('react-markdown-editor-lite'),
        import('./my-plugin'),
      ]).then(res => {
        res[0].default.use(res[1].default);
        resolve(res[0].default);
      });
    });
  },
  { ssr: false }
);

export default function Editor() {
  return <MdEditor style={{ height: '500px' }} renderHTML={renderHTML} />;
}

浏览器 UMD 版本

从 1.1.0 版本开始，支持直接在浏览器中使用 UMD 版本：

html

<!-- 引入 React -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

<!-- 引入编辑器 -->
<link rel="stylesheet" href="https://unpkg.com/react-markdown-editor-lite/lib/index.css" />
<script src="https://unpkg.com/react-markdown-editor-lite/lib/index.js"></script>

<!-- 使用全局变量 ReactMarkdownEditorLite -->
<script>
  // ReactMarkdownEditorLite 已全局可用
</script>

CDN 资源地址：

配置选项

属性	类型	必填	说明
renderHTML	function	是	Markdown 渲染函数
onChange	function	否	内容变化回调函数
value	string	否	编辑器初始值
style	object	否	编辑器样式
className	string	否	自定义 CSS 类名
config	object	否	编辑器配置项

在线示例

项目链接

GitHub 仓库: https://github.com/HarryChen0506/react-markdown-editor-lite
在线演示: https://harrychen0506.github.io/react-markdown-editor-lite/
NPM 包: https://www.npmjs.com/package/react-markdown-editor-lite
中文文档: https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/README_CN.md

许可证

MIT License