Milkdown 插件驱动的 Markdown 编辑器：3 步接入，5 行代码跑通-北京尧图网络

Milkdown 插件驱动的 Markdown 编辑器3 步接入5 行代码跑通【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdownMilkdown 是一款插件驱动的所见即所得 Markdown 编辑器框架底层基于 ProseMirror 和 remark。你用富文本的方式打字文档模型却始终是一棵 Markdown 树导出时直接拿到纯 Markdown 文本。本文带你从 0 开始配好一个 Milkdown 编辑器再用插件把它扩展成自己项目需要的样子全程约 10 分钟。一分钟认识它Milkdown 的定位是「Typora 式」的 WYSIWYG 编辑器输入#视图立刻变成标题但底层数据没有变成 HTML保存时仍是干净的 Markdown。它最大的卖点是按需拼装——预设commonmark/gfm、插件upload、listener、slash 等、组件code-block、table-block 等全部拆成独立包你要哪个就引入哪个。开始之前Node.js 20 或更高版本npm 或 pnpm 包管理器现代浏览器最新版 Chrome、Edge 或 Firefox最快上手路径创建项目npm create vitelatest milkdown-demo -- --template react cd milkdown-demo你应看到带src/目录的 Vite React 项目骨架。安装依赖npm install milkdown/kit milkdown/crepe你应看到package.json的 dependencies 里多出这两个包预设、插件、主题都从这两个包里引不需要再装别的。引入编辑器在src/main.tsx里写上核心 2 行完整文件见下一节import { Crepe } from milkdown/crepe const crepe new Crepe({ root: #root })你应看到一个挂载到#root的编辑器实例。运行npm run dev你应看到 http://localhost:5173 上出现带顶部工具栏的编辑器输入# Hello立刻变成标题。一个能跑起来的例子把src/main.tsx完整替换成下面 12 行代码删掉模板自带的 createRoot 逻辑即可import { Crepe } from milkdown/crepe import milkdown/crepe/theme/common/style.css import milkdown/crepe/theme/frame.css const crepe new Crepe({ root: #root, defaultValue: # Hello Milkdown\n\n输入 / 打开斜杠菜单, }) await crepe.create()运行后页面是一个带 frame 主题的编辑器顶部工具栏有标题、列表、表格等按钮输入/弹出斜杠菜单插入块。编辑后的 Markdown 文本可以通过crepe实例的 API 取出方便直接存库。三个真实场景场景 1图片拖拽上传什么时候需要它用户把图片拖进编辑器你希望自动传到自己的服务器。引入 Milkdown 的 upload 插件1 行import { upload } from milkdown/kit/plugin/upload Editor.make().use(commonmark).use(upload).create(root)要接自己的上传逻辑就在配置里替换uploader函数即可其余不动。场景 2React / Vue 项目集成什么时候需要它你在 React 或 Vue 应用里开发编辑器需要跟随框架生命周期。建议直接装官方集成包milkdown/reactVue 项目装milkdown/vue理由是它把编辑器的创建和销毁都封装好了你不用手写集成代码import { MilkdownProvider, Milkdown, useEditor } from milkdown/react useEditor((root) Editor.make().use(commonmark).create(root)) return MilkdownProviderMilkdown //MilkdownProvider集成包源码在 packages/integrations/想改行为可以直接看实现。场景 3启用表格、删除线等 GFM 语法什么时候需要它写技术文档需要表格、任务列表和删除线。把预设从 commonmark 换成 gfm改 1 行import { gfm } from milkdown/kit/preset/gfm // .use(commonmark) 改成 .use(gfm)容易踩的坑报Cant resolve milkdown/kit/preset/commonmark只装了milkdown/crepe没装milkdown/kit子路径导出无法解析。解法补跑npm install milkdown/kit并保持各包版本一致。编辑器裸奔没工具栏、没样式主题 CSS 没有引入。解法加上import milkdown/crepe/theme/frame.css和common/style.css两行。React 集成后页面空白useEditor和Milkdown /必须渲染在MilkdownProvider内部少了 provider 编辑器不会挂载。解法按场景 2 的结构把组件包起来。往深里走docs/api/ — 按包拆分的 API 文档core、crepe、各插件都有独立页面packages/plugins/ — 插件集合源码listener、slash、streaming、automd 都在这里看源码是理解插件机制最快的方式e2e/src/ — 每个预设和插件的官方用法示例改需求前先来这里找现成写法packages/crepe/src/feature/ — AI 写作、斜杠菜单、表格、LaTeX 等功能模块理解现成编辑器是怎么拼出来的packages/transformer/ — Markdown 与 ProseMirror 模型的双向转换层想自定义解析或序列化规则时读这里Milkdown 的接入成本就是 1 个 npm 包和 5 行代码。现在就回到「最快上手路径」第 4 步跑起你的编辑器然后照着场景 1 给项目加上图片上传。【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Milkdown 插件驱动的 Markdown 编辑器：3 步接入，5 行代码跑通

相关推荐

数字职业转型指南：技术路径与核心能力解析

推荐3个GitHub上能直接解决问题的项目：本地OCR、视频嗅探与AI仿真

HarmonyOS数学教育应用开发实战：数字组合算法与分布式教学

更多资讯

Hindsight Supabase 租户扩展深度解析：本地 JWKS 验证、按用户 Schema 隔离与内置版本迁移

SpringBoot智能健康管理平台开发实践

UVR 完整教程：一键人声消除与AI音频分离

ArduPilot DroneCAN 总线嗅探器实战：用 AP_DroneCAN 例程抓取 UAVCAN 报文并解析 1Hz 统计输出

C语言指针与内存管理核心技术与实践

Cilium Gateway API 外部鉴权实战：用 ExternalAuth 过滤器把 HTTP/gRPC 鉴权下沉到独立 Auth Service

今日更新

51单片机开环控制磁阻传感器的硬件匹配与代码实现

AI Agent安全操作数据库：SQL注入防御与参数化查询实战

Android逆向实战：还原激励类App签到接口的签名算法

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？