Font

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

颜色下拉菜单
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

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

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

功能特性

  • 字体大小、字体系列、颜色、背景色和字重。

插件：

  • FontFamilyPlugin: 通过在 style 属性中使用 font-family 的内联元素更改字体系列。
  • FontSizePlugin: 通过具有 CSS 类或在 style 属性中使用 font-size 的内联元素控制字体大小。
  • FontColorPlugin: 通过在 style 属性中使用 color 的内联元素控制字体颜色。
  • FontBackgroundColorPlugin: 通过在 style 属性中使用 background-color 的内联元素控制字体背景色。
  • FontWeightPlugin: 通过在 style 属性中使用 font-weight 的内联元素控制字体粗细。

安装

npm install @udecode/plate-font

Usage

import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontSizePlugin,
} from '@udecode/plate-font/react';
 
const plugins = [
  // ...otherPlugins,
  FontColorPlugin,
  FontBackgroundColorPlugin,
  FontSizePlugin,
];

Plugins

FontBackgroundColorPlugin

FontColorPlugin

FontFamilyPlugin

FontSizePlugin

FontWeightPlugin

API Components

useColorDropdownMenu

颜色下拉菜单组件的行为 hook。

State

Collapse all

    表示下拉菜单是否打开的布尔值。

    用于切换下拉菜单打开状态的回调函数。

Returns

Collapse all

    需要传递给菜单组件的属性。

    需要传递给按钮组件的属性。

useColorInput

颜色输入组件的行为 hook。

Returns

Collapse all

    需要分配给颜色输入元素的 ref 对象。

    需要传递给触发颜色选择器的子组件的属性。

useColorsCustom

颜色选择器中自定义颜色的行为 hook。

State

Collapse all

    用于更新自定义颜色的回调函数。

    颜色输入的当前值。

    用于更新颜色输入值的回调函数。

Returns

Collapse all

    需要传递给颜色输入元素的属性。

    需要传递给颜色选择器中菜单项元素的属性。

Exit BreakForced Layout