Milkdown 缩进三步把 Tab 默认值调到位【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown你在用 Milkdown 写嵌套列表时发现Tab 键插出的缩进和导出的 Markdown 对不上单独用 indent 插件是两个空格换 Crepe 预设又变成四个。默认值为什么是 2、又为什么会被改本文会讲清楚并带你三步把 Tab 缩进改成自己的习惯。它是怎么工作的indent 插件由两个片组成配置片 indentConfig 和快捷键片 indentPlugin源码在 index.ts。配置片存两个值type 决定插入空格还是制表符size 决定空格数量默认值是{ type: space, size: 2 }。快捷键片负责响应 Tab 键。接下来看执行链路。indentPlugin 是用 $shortcut 可组合器创建的见 $shortcut.ts编辑器 keymap 就绪后它把 Tab 的处理函数注册进 ProseMirror keymap。按下 Tab 时处理函数从上下文读出 indentConfig交给 updateIndent 构造事务。注意一个容易误解的点updateIndent 不移动列表节点它只在光标处插入文本。关键源码就两行const text options.type space ? Array(options.size).fill( ).join() : \t然后tr.insertText(text, to)。这意味着“缩进”是文本层面的字符不是节点层面的层级变化。而 Crepe 构建器在内部把 size 更新成了 4见 builder.ts 中的ctx.update(indentConfig.key, ...)。同一套编辑器在不同入口缩进表现不一致根源就在这里。三步跑通第1步装上依赖并启用 indent 插件Tab 缩进不随核心自动生效插件必须显式挂载。配置如下npm install milkdown/kitimport { Editor } from milkdown/kit/core import { indent } from milkdown/kit/plugin/indent Editor.make().use(indent).create()验证方法光标放到行首按 Tab应插入 2 个空格。第2步把空格数改成 4在 .config() 里用 ctx.set 覆盖配置片整段如下import { indentConfig } from milkdown/kit/plugin/indent Editor .make() .config((ctx) ctx.set(indentConfig.key, { type: space, size: 4 }) ) .use(indent) .create()验证方法按 Tab 后导出 Markdown行首应为 4 个空格。第3步换成制表符缩进如果团队规范用制表符只改 type 一个字段ctx.set(indentConfig.key, { type: tab, size: 1 })验证方法导出 Markdown行首是 \t 而不是空格。把默认值换成你自己的可配置项一共两个全部列在这里配置名默认值说明typespace缩进字符空格或制表符size2每次插入的空格数仅 type 为 space 时生效完整配置示例把缩进单位定为 4 个空格import { Editor } from milkdown/kit/core import { indent, indentConfig } from milkdown/kit/plugin/indent const indentRule { type: space, size: 4 } // 每按一次 Tab 插 4 个空格 Editor .make() .config((ctx) ctx.set(indentConfig.key, indentRule)) .use(indent) .create()踩坑记录现象按 Tab 没有任何反应。原因编辑器没挂载 indent 插件Tab 上没有绑定处理函数。 修复Editor.make() .use(indent) .create()现象type 设成 tab 后size 怎么改都不生效。原因tab 分支固定插入一个 \tsize 只参与空格拼接。 修复// 想控制插入数量只能用空格 ctx.set(indentConfig.key, { type: space, size: 4 })现象用 Crepe 创建后默认缩进是 4 空格而不是 2。原因Crepe 构建器内部把 size 更新成了 4。 修复const cur builder.editor.action(ctx ctx.get(indentConfig.key) ) console.log(cur) // 先读生效值再决定要不要覆盖速查清单用 .use(indent) 启用 indent 插件配置走 ctx.set(indentConfig.key, ...)默认 2 空格Crepe 下为 4 空格Tab 只在光标处插字符不移动节点size 只对空格类型生效如果想给缩进换一套快捷键可以结合 ProseMirror 的 keymap 插件再绑一组按键。更多配置说明见 docs/api/plugin-indent.md。【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考