如何用 Milkdown 在 10 分钟内搭出所见即所得的 Markdown 编辑器-北京尧图网络

如何用 Milkdown 在 10 分钟内搭出所见即所得的 Markdown 编辑器【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdownMilkdown 是一个插件驱动的 WYSIWYG Markdown 编辑器框架底层基于 ProseMirror 与 remark 构建。它把所见即所得和纯 Markdown 源码这两件看似冲突的事合进了同一个编辑体验里并提供 React、Vue 官方集成让你不用从零拼装 DOM 和状态管理。手写编辑器为什么总差最后一步你大概率走过这条路先引一个contenteditable的 div用正则把 Markdown 转成 HTML结果光标一偏移就错位再加撤销发现浏览器原生 undo 和自定义 DOM 操作互相打架代码块、表格这些结构又得单独维护。问题出在用正则去维护一套富文本 DOM本身就很难闭环。Milkdown 的做法是文档建模交给 ProseMirrorMarkdown 解析交给 remark你只管声明要哪些功能。每个功能都是插件use()挂上去remove()摘掉。编辑器核心循环只有 400 多行剩下的全是插件想看懂架构可以直接翻 packages/core/src/editor/editor.ts。最快安装步骤两条命令拉起编辑器新建一个空项目先装套件包npm install milkdown/kitmilkdown/kit统一出口了 core、presets、plugins、components不用再单独装子包。如果你用 React 或 Vue各加一行npm install milkdown/react # 或 milkdown/vue用原生 API 跑最小实例确认链路通了import { Editor, rootCtx, defaultValueCtx } from milkdown/kit/core import { commonmark } from milkdown/kit/preset/commonmark Editor.make() .config((ctx) { ctx.set(rootCtx, document.getElementById(editor)) ctx.set(defaultValueCtx, # 第一行标题) }) .use(commonmark) .create()rootCtx指定挂载点defaultValueCtx设置初始内容commonmark预设带入了标准 Markdown 的 schema、输入规则和键位映射。页面刷新后看到可编辑的标题说明跑通了。React 与 Vue 项目里接入 Milkdown 的正确姿势当前版本的官方集成是 Provider 挂载组件 useEditorHook 三件套不存在旧文档里的EditorProvider和Editor组件。React 端写法如下import { Editor, rootCtx, defaultValueCtx } from milkdown/kit/core import { commonmark } from milkdown/kit/preset/commonmark import { Milkdown, MilkdownProvider, useEditor } from milkdown/react function MarkdownEditor() { useEditor((root) { return Editor.make() .config((ctx) { ctx.set(rootCtx, root) ctx.set(defaultValueCtx, # 在 React 里编辑) }) .use(commonmark) }) return Milkdown / } export function App() { return ( MilkdownProvider MarkdownEditor / /MilkdownProvider ) }MilkdownProvider管理编辑器实例的生命周期Milkdown渲染挂载用的 divuseEditor把配置工厂交给 Provider。组件卸载时框架自动调destroy()不用你手动清理。Vue 端结构对称useEditor内部用inject拿同一个上下文配置逻辑和 React 完全一样script setup import { Editor, rootCtx, defaultValueCtx } from milkdown/kit/core import { commonmark } from milkdown/kit/preset/commonmark import { Milkdown, MilkdownProvider, useEditor } from milkdown/vue useEditor((root) { return Editor.make() .config((ctx) { ctx.set(rootCtx, root) ctx.set(defaultValueCtx, # 在 Vue 里编辑) }) .use(commonmark) }) /script template MilkdownProvider Milkdown / /MilkdownProvider /template两个框架的差异只在底层机制React 用useContextuseEffectVue 用provideinject。你写的配置代码一模一样。按模块组装功能预设、上传、监听、历史跑通之后组装思路是先选预设再叠插件。预设决定了编辑器认识哪些语法。commonmark只覆盖 CommonMark 标准文档里需要表格、删除线、任务列表时换成gfmimport { commonmark } from milkdown/kit/preset/commonmark import { gfm } from milkdown/kit/preset/gfm import { history } from milkdown/kit/plugin/history Editor.make() .config((ctx) { /* 挂载点等配置同前 */ }) .use(commonmark) .use(gfm) .use(history) .create()上传是最常被问到的功能。upload插件同时接管拖拽和粘贴两条图片路径默认的uploader会把图片转 base64 直接塞进文档——方便调试但生产环境建议换成你的 OSS 上传逻辑只需改uploader函数体签名不变import { upload, uploadConfig } from milkdown/kit/plugin/upload Editor.make() .config((ctx) { ctx.update(uploadConfig.key, (prev) ({ ...prev, uploader: async (files, schema) { const nodes [] for (const file of files) { const src await new Promise((res) { const r new FileReader() r.onload () res(r.result) r.readAsDataURL(file) }) nodes.push(schema.nodes.image.createAndFill({ src, alt: file.name })) } return nodes }, })) }) .use(upload) .create()监听适合做自动保存或同步预览。listener插件暴露markdownUpdated回调每次内容变化都会触发import { listener, listenerCtx } from milkdown/kit/plugin/listener Editor.make() .config((ctx) { ctx.get(listenerCtx).markdownUpdated((_, markdown) { console.log(新内容:, markdown) }) }) .use(listener) .create()历史history插件提供了CtrlZ/CtrlY的撤销重做。不想要这两个快捷键的话不use()它就行不需要改 keymap。各插件的入口都在 packages/plugins/ 下每个插件一个子目录想看某个插件注入了哪些 context直接翻它自己的src/比查 API 文档快。这几个坑先避开create()是异步的。它返回PromiseEditor。React/Vue 集成里useEditor帮你处理了 await 和销毁时机但用原生 API 时要在.then()里再操作文档。主题要单独引 CSS。nord主题包附带style.css不 import 进去编辑器没有样式import milkdown/theme-nord/style.cssNode 版本。仓库engines要求22低于这个版本跑 monorepo 脚本会直接报错。预设不要重复挂。同名预设use()两次会覆盖 schema编辑器直接白屏。一个预设use()一次加完跑一下看有没有报错。顺着源码找答案Milkdown 的仓库本身就是最好的文档。几个高频入口核心循环和状态机packages/core/src/editor/editor.ts可运行的集成示例React/Vue 都有e2e/src/Storybook 组件演示storybook/stories/遇到这个插件到底注入了什么这类问题直接在对应src/下搜$ctx(每个导出都带了meta.displayName。控制台调editor.inspect()能列出当前挂载的全部插件定位冲突一目了然【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

如何用 Milkdown 在 10 分钟内搭出所见即所得的 Markdown 编辑器

相关推荐

DSSS调制工程包：BPSK/QPSK/16QAM的码相位对齐与同步

Unity跑酷工程包处理指南：从解压、优化到WebGL发布

NeMo Speech 音频（audio）集合数据集指南：NeMo Manifest 与 Lhotse 格式的构建、转换与实战配置

更多资讯

PyTorch入门必学：用dir()和help()快速摸清API与环境配置

微信个人号API开发指南：Web协议与Hook技术对比

AWS CLI 实战：使用 appmesh delete-route 命令删除 App Mesh 路由

VoiceStudio 安装后如何用参考音频完成第一次声音克隆？

企业级多Agent协同实战：A2A协议与人机责任链设计

Vivix-W1与Codex Voice：流式多模态交互如何重构AI协作范式

今日更新

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

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

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

本周精选

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

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

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

本月热门

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

分布式服务的决策记录

创业产品的首版范围

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