探索 Tiptap V3 的最新功能

标题扩展

版本下载量

标题扩展支持不同级别的标题。标题用 <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/LinuxmacOS
toggleHeading( level: 1 )Control + Alt + 1Cmd + Alt + 1
toggleHeading( level: 2 )Control + Alt + 2Cmd + Alt + 2
toggleHeading( level: 3 )Control + Alt + 3Cmd + Alt + 3
toggleHeading( level: 4 )Control + Alt + 4Cmd + Alt + 4
toggleHeading( level: 5 )Control + Alt + 5Cmd + Alt + 5
toggleHeading( level: 6 )Control + Alt + 6Cmd + Alt + 6

源代码

packages/extension-heading/