背景颜色扩展

该扩展使您能够在编辑器中设置背景颜色。它使用 TextStyle 标记，该标记渲染一个 <span> 标签（仅此而已）。背景颜色作为内联样式应用，例如 <span style="background-color: #958DF1">。

安装

npm install @tiptap/extension-text-style

该扩展需要 TextStyle 标记。

import { Editor } from '@tiptap/core'
import { TextStyle, BackgroundColor } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyle, BackgroundColor],
})

默认情况下，该扩展与 TextStyleKit 扩展一起安装，因此您无需单独安装。

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

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

设置

types

应应用颜色属性的标记列表。

默认值： ['textStyle']

BackgroundColor.configure({
  types: ['textStyle'],
})

命令

setBackgroundColor()

将给定的背景颜色作为内联样式应用。

editor.commands.setBackgroundColor('#ff0000')

unsetBackgroundColor()

移除任何背景颜色。

editor.commands.unsetBackgroundColor()

源代码

packages/extension-text-style/src/background-color/

最小安装

import { Editor } from '@tiptap/core'
import { BackgroundColor } from '@tiptap/extension-text-style/background-color'

new Editor({
  extensions: [BackgroundColor],
})