---
title: "任务列表扩展"
description: "在 Tiptap 中使用任务列表扩展以支持渲染为 的任务列表。详情请参考我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/task-list"
---

# 任务列表扩展

在 Tiptap 中使用任务列表扩展以支持渲染为 的任务列表。详情请参考我们的文档！

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

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

> **Interactive demo:** [TaskList](https://embed.tiptap.dev/preview/Nodes/TaskList)

## 安装

```bash
npm install @tiptap/extension-list
```

该扩展依赖于 [`TaskItem`](https://tiptap.zhcndoc.com/editor/extensions/nodes/task-item.md) 扩展。

## 使用方法

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

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

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

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

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

## 设置

### HTMLAttributes

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

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

### itemTypeName

指定列表项的名称。

默认值： `'taskItem'`

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

## 命令

# toggleTaskList()

切换任务列表。

```js
editor.commands.toggleTaskList()
```

## 快捷键

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

## 源代码

[packages/extension-list/src/task-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list/src/task-list/)

## 最简安装

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

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