字体

PreviousNext

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

字体颜色工具栏按钮字体大小工具栏按钮
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Color picker for text and background colors.
font-demo
font-demo

功能特性

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

插件

  • 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),
];
  • 包含所有字体插件（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,
  ],
});

手动使用

安装

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 {
  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

Collapse all

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

tf.color.addMark

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

Parameters

Collapse all

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

tf.fontFamily.addMark

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

Parameters

Collapse all

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

tf.fontSize.addMark

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

Parameters

Collapse all

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

tf.fontWeight.addMark

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

Parameters

Collapse all

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

API

toUnitLess

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

Parameters

Collapse all

    要转换的字体大小值。

Returnsstring

Collapse all

    无单位的字体大小值。

MarkdownFont