字体

PreviousNext

为文档内容提供扩展的格式化选项。

字体颜色工具栏按钮字体大小工具栏按钮
Loading…

功能特性

  • 为选中的文本应用字体样式，包括大小、字体、颜色、背景色和粗细。
  • 支持自定义字体、大小、颜色和粗细。

插件

  • FontBackgroundColorPlugin: 使用 background-color 样式控制背景色
  • FontColorPlugin: 使用 color 样式控制字体颜色
  • FontFamilyPlugin: 使用内联元素和 font-family 样式更改字体
  • FontSizePlugin: 使用 CSS 类或 font-size 样式控制字体大小
  • FontWeightPlugin: 使用 font-weight 样式控制字体粗细

Kit 使用

安装

添加字体样式功能最快的方式是使用 FontKit，它包含了预配置的字体插件及其 Plate UI 组件。

'use client';
 
import type { PlatePluginConfig } from 'platejs/react';
 
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
 
const options = {
  inject: { targetPlugins: [KEYS.p] },
} satisfies PlatePluginConfig;
 
export const FontKit = [
  FontColorPlugin.configure({
    inject: {
      ...options.inject,
      nodeProps: {
        defaultNodeValue: 'black',
      },
    },
  }),
  FontBackgroundColorPlugin.configure(options),
  FontSizePlugin.configure(options),
  FontFamilyPlugin.configure(options),
];
'use client';
 
import type { PlatePluginConfig } from 'platejs/react';
 
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
 
const options = {
  inject: { targetPlugins: [KEYS.p] },
} satisfies PlatePluginConfig;
 
export const FontKit = [
  FontColorPlugin.configure({
    inject: {
      ...options.inject,
      nodeProps: {
        defaultNodeValue: 'black',
      },
    },
  }),
  FontBackgroundColorPlugin.configure(options),
  FontSizePlugin.configure(options),
  FontFamilyPlugin.configure(options),
];
  • 包含所有字体插件（FontColorPlugin、FontBackgroundColorPlugin、FontSizePlugin、FontFamilyPlugin），并具有合理的默认值。

添加 Kit

将 kit 添加到你的插件中：

import { createPlateEditor } from 'platejs/react';
import { FontKit } from '@/components/editor/plugins/font-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...FontKit,
  ],
});
import { createPlateEditor } from 'platejs/react';
import { FontKit } from '@/components/editor/plugins/font-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...FontKit,
  ],
});

手动使用

安装

pnpm add @platejs/basic-styles
pnpm add @platejs/basic-styles

添加插件

在创建编辑器时，将字体插件包含在你的 Plate 插件数组中。

import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin,
    FontBackgroundColorPlugin,
    FontFamilyPlugin,
    FontSizePlugin,
  ],
});
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin,
    FontBackgroundColorPlugin,
    FontFamilyPlugin,
    FontSizePlugin,
  ],
});

配置插件

你可以使用自定义选项和目标元素来配置各个字体插件。

import {
  FontColorPlugin,
  FontBackgroundColorPlugin,
  FontSizePlugin,
  FontFamilyPlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 'black',
        },
        targetPlugins: [KEYS.p],
      },
    }),
    FontSizePlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontBackgroundColorPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontFamilyPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
  ],
});
import {
  FontColorPlugin,
  FontBackgroundColorPlugin,
  FontSizePlugin,
  FontFamilyPlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 'black',
        },
        targetPlugins: [KEYS.p],
      },
    }),
    FontSizePlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontBackgroundColorPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontFamilyPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
  ],
});
  • inject.nodeProps.defaultNodeValue: 设置默认字体颜色值。
  • inject.targetPlugins: 指定哪些元素类型可以接收字体样式（影响 HTML 解析）。

添加工具栏按钮

你可以将 FontColorToolbarButton 和 FontSizeToolbarButton 添加到你的 Toolbar 中，以控制字体颜色和大小。

插件

FontBackgroundColorPlugin

用于字体背景色格式化的插件。将 background-color 样式应用于选中的文本。

FontColorPlugin

用于字体颜色格式化的插件。将 color 样式应用于选中的文本。

FontFamilyPlugin

用于字体格式化的插件。将 font-family 样式应用于选中的文本。

FontSizePlugin

用于字体大小格式化的插件。将 font-size 样式应用于选中的文本。

FontWeightPlugin

用于字体粗细格式化的插件。将 font-weight 样式应用于选中的文本。

转换

tf.backgroundColor.addMark

在选中的文本上设置字体背景色标记。

Parameters

    要设置的背景色值（例如：'#ff0000'、'red'）。

tf.color.addMark

在选中的文本上设置字体颜色标记。

Parameters

    要设置的颜色值（例如：'#0000ff'、'blue'）。

tf.fontFamily.addMark

在选中的文本上设置字体标记。

Parameters

    要设置的字体值（例如：'Arial'、'Times New Roman'）。

tf.fontSize.addMark

在选中的文本上设置字体大小标记。

Parameters

    要设置的字体大小值（例如：'16px'、'1.2em'）。

tf.fontWeight.addMark

在选中的文本上设置字体粗细标记。

Parameters

    要设置的字体粗细值（例如：'bold'、'400'、'600'）。

API

toUnitLess

将字体大小值转换为无单位值。

Parameters

    要转换的字体大小值。

Returnsstring

    无单位的字体大小值。