---
title: "标题扩展"
description: "在 Tiptap 中使用标题扩展来支持不同级别的标题，使用 HTML 标签。详细信息请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/heading"
---

# 标题扩展

在 Tiptap 中使用标题扩展来支持不同级别的标题，使用 HTML 标签。详细信息请查看我们的文档！

标题扩展支持不同级别的标题。标题用 `<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>` 或 `<h6>` HTML 标签呈现。默认情况下，所有六个标题级别（或样式）都是启用的，但您可以传递一个数组以仅允许某些级别。查看使用示例以了解如何实现。

在新行的开头键入 # ，它将神奇地转换为标题，## 、### 、#### 、#####  和 ######  也是如此。

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

## 安装

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

## 设置

### HTMLAttributes

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

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

### levels

指定支持的标题级别。

默认值: `[1, 2, 3, 4, 5, 6]`

```js
Heading.configure({
  levels: [1, 2],
})
```

## 命令

### setHeading()

创建具有指定级别的标题节点。

```js
editor.commands.setHeading({ level: 1 })
```

### toggleHeading()

切换具有指定级别的标题节点。

```js
editor.commands.toggleHeading({ level: 1 })
```

## 快捷键

| 命令                        | Windows/Linux     | macOS         |
| ------------------------- | ----------------- | ------------- |
| toggleHeading( level: 1 ) | Control + Alt + 1 | Cmd + Alt + 1 |
| toggleHeading( level: 2 ) | Control + Alt + 2 | Cmd + Alt + 2 |
| toggleHeading( level: 3 ) | Control + Alt + 3 | Cmd + Alt + 3 |
| toggleHeading( level: 4 ) | Control + Alt + 4 | Cmd + Alt + 4 |
| toggleHeading( level: 5 ) | Control + Alt + 5 | Cmd + Alt + 5 |
| toggleHeading( level: 6 ) | Control + Alt + 6 | Cmd + Alt + 6 |

## 源代码

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