打造基于 Milkdown 的所见即所得 Markdown 编辑器

前言

React 里接 Markdown 编辑器其实不难，难的是把"能用"变成"好用"。编辑器本体跑起来可能只要几分钟，但后面很快就会开始补各种能力：

Markdown 语法支持
数学公式
代码高亮
图片上传
深色主题
国际化
工具栏和快捷菜单

这些东西单独看都不复杂，但真要一个个接起来，往往会花掉不少时间。尤其是在后台系统、知识库或者博客发布场景里，大部分时候我们只是想要一个"开箱就能用"的编辑器，而不是重新搭一套编辑器基础设施。

最近整理了一个打造基于 Milkdown 的所见即所得 Markdown 编辑器封装：zt-react-milkdown。目标很简单：把业务里常用的能力提前集成好，尽量做到装完就能直接用。

git仓库： github.com/lzt-T/zt-re...

npm地址： www.npmjs.com/package/zt-...

示例地址： markdown.xjoker.top/

正文

它是什么

zt-react-milkdown 是一个基于 Milkdown 的所见即所得 Markdown 编辑器。

比较适合这些场景：

后台内容编辑
知识库系统
博客发布
文档管理页面

它本身并不是重新实现一套编辑器，而是把业务里常见的能力提前集成好，减少重复接入和配置成本。

快速上手

安装：

bash 复制代码

npm install zt-react-milkdown

最小可用示例：

tsx 复制代码

import { useState } from 'react';
import { MilkdownEditor } from 'zt-react-milkdown';
import 'zt-react-milkdown/style.css';

export default function Demo() {
  const [value, setValue] = useState('# Hello\n\n行内公式：$E=mc^2$');

  return (
    <MilkdownEditor
      value={value}
      onChange={setValue}
      theme="light"
      locale="zh-CN"
      placeholder="请输入 Markdown"
    />
  );
}

这里有一个容易忽略但很关键的点：引入 zt-react-milkdown/style.css 后，会同时包含编辑器样式和公式渲染所需的KaTeX样式，避免你再单独补一套公式展示样式。

核心能力速览

在日常业务最常用的能力上，这个库已经覆盖得比较完整：

编辑模式
- 支持受控（value）与非受控（defaultValue）两种使用方式
- 支持 readOnly 切换只读
- 支持 placeholder 占位文案
Markdown 与内容能力
- 基于 CommonMark + GFM，包含任务列表、表格等常见语法
- 支持数学公式（块级公式、行内公式）
- 行内公式适合在段落中嵌入数学表达式，例如：爱因斯坦质能方程：$E=mc^2$
- 支持代码块编辑、语言选择与语法高亮
- 支持图片插入，并可配置上传策略
交互增强
- 支持 Slash 菜单（/ 触发快捷命令）
- 支持选区工具栏（如加粗、斜体、链接等）
- 支持表格增强交互
体验与扩展
- 国际化：内置 zh-CN / en-US
- 主题：支持 light / dark

结语

感兴趣的可以试试，提提bug