tiptap 标题
标题扩展提供了对不同级别标题的支持。标题将使用 <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 }) | Ctrl Alt 1 |
Cmd Alt 1 |
toggleHeading({ level: 2 }) | Ctrl Alt 2 |
Cmd Alt 2 |
toggleHeading({ level: 3 }) | Ctrl Alt 3 |
Cmd Alt 3 |
toggleHeading({ level: 4 }) | Ctrl Alt 4 |
Cmd Alt 4 |
toggleHeading({ level: 5 }) | Ctrl Alt 5 |
Cmd Alt 5 |
toggleHeading({ level: 6 }) | Ctrl Alt 6 |
Cmd Alt 6 |