颜色扩展

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

安装

npm install @tiptap/extension-text-style

此扩展需要 TextStyle 标记。

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

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

此扩展默认与 TextStyleKit 扩展一起安装，因此您不需要单独安装它。

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

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

设置

types

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

默认: ['textStyle']

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

命令

setColor()

将给定字体颜色应用为行内样式。

editor.commands.setColor('#ff0000')

unsetColor()

移除任何字体颜色。

editor.commands.unsetColor()

源代码

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

最小安装

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

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