FontFamily 扩展

此扩展使您能够在编辑器中设置字体系列。它使用 TextStyle 标记，渲染一个 <span> 标签。字体系列作为内联样式应用，例如 <span style="font-family: Arial">。

注意！

请注意，editor.isActive('textStyle', { fontFamily: '字体系列' }) 将返回由浏览器的 CSS 规则设置的字体系列，而不是您在设置字体系列时预期的结果。

安装

npm install @tiptap/extension-text-style

此扩展需要 TextStyle 标记。

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

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

此扩展默认随 TextStyleKit 扩展一起安装，因此您无需单独安装。

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

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

设置

types

要应用字体系列属性的标记列表。

默认值： ['textStyle']

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

命令

setFontFamily()

将给定的字体系列作为内联样式应用。

editor.commands.setFontFamily('Inter')

unsetFontFamily()

移除任何字体系列。

editor.commands.unsetFontFamily()

源代码

packages/extension-text-style/src/font-family/

最小安装

import { Editor } from '@tiptap/core'
import { FontFamily } from '@tiptap/extension-text-style/font-family'

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