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 行代码跑通
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），仅供参考
