企业官网建设流程全解析

拆层看 Milkdown：一条路径跑通插件驱动的 Markdown 编辑器

【免费下载链接】milkdown🍼 Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown

给内容型产品接一个可定制的 Markdown 编辑器，直接嵌现成组件往往改不动文档模型和渲染逻辑。Milkdown 是一个插件驱动的所见即所得（WYSIWYG）Markdown 编辑器框架，基于 ProseMirror 与 remark，把能力拆成内核、预设、插件、框架适配四层，适合需要在 React 或 Vue 项目里自建编辑体验、又不想从底层造轮子的工程师。

拆成四层，看清能力边界

• 内核（packages/core/）：提供Editor构建器、ctx上下文容器和 transformer 文档转换器。ctx是一个带类型的依赖注入容器，所有插件共享同一套 ctx——这是"插件驱动"能成立的前提。
• 预设：commonmark和gfm两组打包好的语法规则。选哪个决定编辑器支持哪些 Markdown 语法，表格、任务列表、删除线都在 gfm 里。
• 插件：独立功能单元，.use()叠加即可。上传、代码高亮、流式渲染、协作、监听器、slash 命令菜单，各管一件事。
• 框架适配：@milkdown/react、@milkdown/vue只负责生命周期和容器挂载，编辑逻辑仍然写在Editor上，两边心智模型一致。

分层的实际意义：想换渲染方案不用动插件，想加功能不用改内核。

用 Editor.make() 跑通原生编辑器

不依赖任何框架，三步就能起一个可编辑的 Markdown 实例：

import { Editor, rootCtx } from '@milkdown/core' import { commonmark } from '@milkdown/kit/preset/commonmark' Editor.make() .config((ctx) => ctx.set(rootCtx, document.getElementById('app'))) .use(commonmark) .create()

第一行链式构建，.config指定挂载容器，.use注入语法规则，.create产出实例。更完整的例子（含主题、撤销历史）可以直接看 e2e/src/preset-gfm/main.ts，e2e 目录下每个功能都有对应可运行的演示页。

接入 React 与 Vue：Provider 包一层

框架集成包统一采用"Provider 提供上下文 + 容器组件占位 + hook 驱动构建"的模式：

import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/react' import { Editor } from '@milkdown/core' import { commonmark } from '@milkdown/kit/preset/commonmark' function App() { useEditor((root) => Editor.make().config(rootCtx, root).use(commonmark).create() ) return <MilkdownProvider><Milkdown /></MilkdownProvider> }

Vue 侧 API 完全同构，useEditor在setup里调用，模板里放<MilkdownProvider><Milkdown /></MilkdownProvider>即可。组件实现本身很薄——packages/integrations/react/src/ 里就是 Context + ref 挂载，值得花两分钟读一下。

按需装插件：配置即注入 🧩

插件机制的核心是"先配置、后启用"：.config在启用前修改 ctx 中对应插件的 slice，.use才生效。以拖拽上传为例，默认行为是插入本地占位，业务里通常要覆盖uploader：

import { upload, uploadConfig } from '@milkdown/plugin-upload' Editor.make() .config((ctx) => ctx.update(uploadConfig.key, (prev) => ({ ...prev, uploader: async (files, ctx) => { // 上传到你的对象存储，返回 URL 即可 }, })) ) .use(upload) .create()

其余插件同理：找到插件导出的xxConfig，在 ctx 里改它的默认值。想确认某个插件暴露了哪些配置项，直接看它自己的源码目录，每个插件都独立成包。

顺源码与文档继续深挖

三条建议路径：

1. 想搞懂渲染管线，读 packages/core/src/internal-plugin/，parser、serializer、keymap 都在里面；
2. 按功能查配置，docs/api/ 下每个插件、组件一页；
3. 想抄完整用法，e2e/src/ 下 multi-editor、crepe 等目录是现成参考实现。

下一步建议：把上面的commonmark换成gfm预设重跑一遍，确认表格和任务列表生效，然后从 docs/api/ 挑一个最贴近业务缺口的插件（多半是 upload 或 streaming），照"配置即注入"的方式接进你的页面。

【免费下载链接】milkdown🍼 Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown