任务列表扩展

该扩展使您能够在编辑器中使用任务列表。它们被渲染为 <ul data-type="taskList">。该实现不依赖任何框架，仅使用原生 JavaScript。

在新行开头输入 [ ] 或 [x] ，它将神奇地转换成任务列表。

安装

npm install @tiptap/extension-list

该扩展依赖于 TaskItem 扩展。

import { Editor } from '@tiptap/core'
import { TaskList } from '@tiptap/extension-list'

new Editor({
  extensions: [TaskList],
})

该扩展默认包含在 ListKit 扩展中，因此无需单独安装。

import { Editor } from '@tiptap/core'
import { ListKit } from '@tiptap/extension-list-kit'

new Editor({
  extensions: [ListKit],
})

自定义应添加到渲染的 HTML 标签上的 HTML 属性。

TaskList.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

指定列表项的名称。

默认值： 'taskItem'

TaskList.configure({
  itemTypeName: 'taskItem',
})

切换任务列表。

editor.commands.toggleTaskList()

命令	Windows/Linux	macOS
toggleTaskList()	`Control` + `Shift` + `9`	`Cmd` + `Shift` + `9`

import { Editor } from '@tiptap/core'
import { TaskList } from '@tiptap/extension-list/task-list'

new Editor({
  extensions: [TaskList],
})