拆层看 Milkdown一条路径跑通插件驱动的 Markdown 编辑器【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown给内容型产品接一个可定制的 Markdown 编辑器直接嵌现成组件往往改不动文档模型和渲染逻辑。Milkdown 是一个插件驱动的所见即所得WYSIWYGMarkdown 编辑器框架基于 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.tse2e 目录下每个功能都有对应可运行的演示页。接入 React 与 VueProvider 包一层框架集成包统一采用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 MilkdownProviderMilkdown //MilkdownProvider }Vue 侧 API 完全同构useEditor在setup里调用模板里放MilkdownProviderMilkdown //MilkdownProvider即可。组件实现本身很薄——packages/integrations/react/src/ 里就是 Context ref 挂载值得花两分钟读一下。按需装插件配置即注入 插件机制的核心是先配置、后启用.config在启用前修改 ctx 中对应插件的 slice.use才生效。以拖拽上传为例默认行为是插入本地占位业务里通常要覆盖uploaderimport { 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 里改它的默认值。想确认某个插件暴露了哪些配置项直接看它自己的源码目录每个插件都独立成包。顺源码与文档继续深挖三条建议路径想搞懂渲染管线读 packages/core/src/internal-plugin/parser、serializer、keymap 都在里面按功能查配置docs/api/ 下每个插件、组件一页想抄完整用法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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考