项目

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

源代码

packages/extension-heading/

使用示例

嵌入式演示

在本文档中