Draftail 用户指南键盘快捷键与自动列表等 10 个免鼠标编辑技巧【免费下载链接】draftail A configurable rich text editor built with Draft.js项目地址: https://gitcode.com/gh_mirrors/dr/draftailDraftail 是一款基于 Draft.js 构建的可配置富文本编辑器专为免鼠标设计——绝大多数排版操作都可以纯键盘完成。本文整理 10 个实用编辑技巧涵盖键盘快捷键、Markdown 风格输入和自动列表帮你快速上手 Draftail 富文本编辑器。1. 自动列表行首输入-或1.秒建列表Draftail 支持自动列表Autolists在行首输入-、*加空格自动变成无序列表输入1.加空格自动变成有序列表无需点任何按钮。这一行为由src/api/behavior.ts中的handleBeforeInputBlockType驱动映射表定义在src/api/constants.ts的INPUT_BLOCK_MAP中。2. 回车续写列表空项自动退出在列表项末尾按Enter自动创建下一个列表项并继续编号或圆点当列表项为空时再按Enter自动跳出列表变回普通段落对以-list-item结尾的自定义列表块同样生效。3. Markdown 风格标题#到######一行切换在行首输入# 空格得到一级标题## 空格二级标题依此类推直到######。这是把整行文字转成标题最快的方式比在工具栏翻找 H1~H6 按钮快得多。4.一键转代码块在行首输入三个反引号回车当前行立即变成代码块参考INPUT_BLOCK_MAP中的条目。代码块内的换行行为做了特殊处理不会意外跳出。5. Markdown 文本格式快捷键**、_、~~、选中文字后输入 Markdown 标记即可自动应用样式完整映射见src/api/constants.ts的INPUT_STYLE_MAP输入标记效果**文字**或__文字__粗体*文字*或_文字_斜体~~文字~~或~文字~删除线文字行内代码6. 经典组合键B、I、U、J 一个不能少快捷键功能Ctrl/Cmd B粗体Ctrl/Cmd I斜体Ctrl/Cmd U下划线Ctrl/Cmd J行内代码Ctrl/Cmd Shift X删除线Ctrl/Cmd .上标Ctrl/Cmd ,下标这些绑定在src/api/behavior.ts的getKeyBindingFn中按配置动态启用未启用的格式不会误触。7. Ctrl/Cmd K 快速插入链接选中文字按Ctrl/Cmd K直接打开链接编辑弹窗这是浏览器里约定俗成的链接快捷键从其他编辑器切过来零学习成本。8. 无限撤销 / 重做写错也不怕Ctrl/Cmd Z撤销Ctrl/Cmd Shift Z重做。Draftail 提供直到时间尽头的撤销栈误操作可以一路回退放心大胆编辑。9. Tab / Shift Tab 调整列表缩进Tab加深列表项嵌套Shift Tab反方向减少嵌套。嵌套层级由maxListNesting属性控制行为稳定、不易跳层。10. Shift Enter 换行、---插入分隔线Shift Enter在段落内插入软换行不产生新段落在空行输入---自动生成水平分隔线代码块内除外。彩蛋命令面板Command Palette如果你连工具栏都不想找Draftail v2 提供了可选的CommandPalette组件见src/components/CommandPalette/CommandPalette.tsx打开面板输入文字即可搜索并执行标题、列表、链接等全部格式命令完全键盘可控。快速参考Draftail 键盘快捷键速查操作快捷键 / 输入无序列表行首-或*有序列表行首1.标题 1~6行首#~######引用块行首代码块行首粗体 / 斜体 / 下划线Ctrl/Cmd B / I / U行内代码Ctrl/Cmd J 或删除线Ctrl/Cmd Shift X 或~~上标 / 下标Ctrl/Cmd . / ,链接Ctrl/Cmd K撤销 / 重做Ctrl/Cmd Z / Shift Z软换行Shift Enter分隔线---列表缩进Tab / Shift Tab掌握以上 10 个技巧你的鼠标就可以一直留在桌面上休息了。更多细节可参考项目文档目录docs/与主配置文件src/api/constants.ts中的完整快捷键表。【免费下载链接】draftail A configurable rich text editor built with Draft.js项目地址: https://gitcode.com/gh_mirrors/dr/draftail创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考