TextStyleKit 扩展

TextStyleKit 是一组最常见的 Tiptap 文本样式扩展。如果你想快速在 Tiptap 中设置文本样式，这个扩展适合你。

安装

npm install @tiptap/extension-text-style

包含的扩展

Marks

TextStyle

功能

BackgroundColor
Color
FontFamily
FontSize
LineHeight

源代码

packages/extension-text-style/

使用 TextStyleKit 扩展

将 TextStyleKit 传递给编辑器，以一次加载所有包含的扩展。

import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

const editor = new Editor({
  extensions: [TextStyleKit],
})

你可以配置包含的扩展，甚至禁用其中一些，如下所示。

import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      // 禁用某个扩展
      backgroundColor: false,

      // 配置某个扩展
      fontSize: {
        types: ['heading', 'paragraph'],
      },
    }),
  ],
})