标题扩展
标题扩展支持不同级别的标题。标题用 <h1>、<h2>、<h3>、<h4>、<h5> 或 <h6> HTML 标签呈现。默认情况下,所有六个标题级别(或样式)都是启用的,但您可以传递一个数组以仅允许某些级别。查看使用示例以了解如何实现。
在新行的开头键入 # ,它将神奇地转换为标题,## 、### 、#### 、##### 和 ###### 也是如此。
安装
npm install @tiptap/extension-heading设置
HTMLAttributes
应添加到渲染的 HTML 标签的自定义 HTML 属性。
Heading.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})levels
指定支持的标题级别。
默认值: [1, 2, 3, 4, 5, 6]
Heading.configure({
levels: [1, 2],
})命令
setHeading()
创建具有指定级别的标题节点。
editor.commands.setHeading({ level: 1 })toggleHeading()
切换具有指定级别的标题节点。
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 |