5 分钟玩转 Tiptap 列表：无序、有序、任务列表一次讲透

5 分钟玩转 Tiptap 列表无序、有序、任务列表一次讲透【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap你在做一个笔记应用正文要点用无序列表操作步骤用有序列表任务看板上还需要能勾选的条目。Tiptap 列表能力把这三种形态都内置好了你只需要在扩展配置里多做几行注册。这篇把安装、配置、样式定制和容易踩的坑一次讲完看完就能直接抄进项目。一张表看懂 Tiptap 三种列表能力扩展渲染结果切换命令适用场景源码位置BulletListTiptap 无序列表ultoggleBulletList要点罗列、素材清单bullet-list.tsOrderedListTiptap 有序列表oltoggleOrderedList步骤、排名、流程ordered-list.tsTaskList TaskItemTiptap 任务列表ul />npm install tiptap/vue-3 tiptap/starter-kit tiptap/extension-listtemplate div classtoolbar button clickeditor.chain().focus().toggleBulletList().run()无序/button button clickeditor.chain().focus().toggleOrderedList().run()有序/button button clickeditor.chain().focus().toggleTaskList().run()任务/button /div editor-content :editoreditor classtiptap / /template script setup import { useEditor, EditorContent } from tiptap/vue-3 import StarterKit from tiptap/starter-kit import { TaskList, TaskItem } from tiptap/extension-list const editor useEditor({ extensions: [ StarterKit, // 已含 BulletList / OrderedList / ListItem TaskList, TaskItem.configure({ nested: true }), // 默认不支持嵌套显式打开 ], content: p选中文本点上面的按钮试试/p, }) /script三个按钮分别对应三种列表的切换命令命令名就是列表名加toggle前缀很好记。按真实场景写列表用输入规则打出文档清单少点一次按钮Tiptap 列表支持 Markdown 式输入规则行首输入-自动变无序列表1.变有序列表[ ]变任务项。你甚至不用碰工具栏打字本身就是操作。这个正则定义在 bullet-list.ts 的bulletListInputRegex里想改触发符号比如加个可以自己扩展。给任务看板加可勾选的 TaskItem任务项的勾选状态存在节点属性checked里渲染成data-checked属性复选框由内置 NodeView 负责。两个实用配置TaskItem.configure({ nested: true, // 允许任务下面挂子任务 onReadOnlyChecked: (node, checked) { // 只读模式下点勾选框时触发返回 false 则回滚 UI return true }, })nested默认是false不开的话任务项里按 Tab 不会缩进——这是任务列表嵌套失灵最常见的原因。用 Tab 和 ShiftTab 搭多层嵌套列表嵌套不用写任何命令光标在列表项里按 Tab 下沉sinkListItem按 ShiftTab 上移liftListItem快捷键注册在 list-item.ts 里。当嵌套列表要整体删掉时Backspace/Delete 会触发分支合并逻辑见 helpers 目录把子列表提到父级而不是留一个空壳。把 Tiptap 列表样式调出高级感Tiptap 列表本身不带样式ul、ol、li都是原生标签Tiptap 列表样式完全交给 CSS。任务列表的ul和li上会带data-type属性正好用来做差异化选择器/* 基础缩进与间距 */ .tiptap ul, .tiptap ol { padding-left: 1.5rem; margin: 0.75rem 0; } /* 用伪元素换掉默认圆点 */ .tiptap ul:not([data-typetaskList]) li { list-style: none; } .tiptap ul:not([data-typetaskList]) li::before { content: ▸; color: #6366f1; margin-left: -1rem; display: inline-block; width: 1rem; } /* 任务项勾选后整行置灰 */ .tiptap li[data-typetaskItem] { display: flex; gap: 0.5rem; } .tiptap li[data-typetaskItem][data-checkedtrue] span, .tiptap li[data-typetaskItem][data-checkedtrue] div { text-decoration: line-through; opacity: 0.6; }想让某个列表单独换 class在扩展配置里传HTMLAttributes即可它会合并到渲染出的标签上OrderedList.configure({ HTMLAttributes: { class: my-steps } })这几个坑我替你踩过了有序列表的start不是靠 configure 写死的。参考一些旧教程可能让你写OrderedList.configure({ start: 3 })但start是节点属性实际来源是输入规则行首输入3.加空格Tiptap 就会创建一个从 3 开始的有序列表见 ordered-list.ts 中getAttributes: match ({ start: match[1] })。渲染时只有start ! 1才会输出start属性所以默认列表的 HTML 是干净的。列表项里的加粗、颜色丢失是默认行为。keepMarks和keepAttributes默认false意思是回车拆分列表项时新项不继承文本样式。希望新项保留当前加粗/字体颜色就配置BulletList.configure({ keepMarks: true })。任务项默认不能嵌套。再强调一次TaskItem的nested默认false不开 Tab 缩进不生效。快捷键速查前三个在对应列表扩展里注册后三个在 ListItem 里注册操作Windows / LinuxMac切换 Tiptap 无序列表CtrlShift8CmdShift8切换 Tiptap 有序列表CtrlShift7CmdShift7切换 Tiptap 任务列表CtrlShift9CmdShift9列表项内新建一项EnterEnter增加一层嵌套TabTab减少一层嵌套ShiftTabShiftTab列表只是开始。下一步建议先试试把tiptap/markdown接上三种列表都内置了 Markdown 解析与序列化再去看 任务列表的官方示例感受完整交互如果你的产品里还有拖拽、粘贴转换这类需求extension-list 的源码结构会告诉你该从哪个文件下手。【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考