文本对齐

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>
  );
}
Text alignment controls for blocks.
align-demo
align-demo

功能特性

  • 为段落、标题等块级元素设置文本对齐方式
  • 支持左对齐、右对齐、居中对齐和两端对齐
  • 向目标块元素注入 align 属性

套件使用

安装

最快捷的文本对齐实现方式是使用 AlignKit，它包含了预配置好的 TextAlignPlugin，可作用于段落、标题、图片和媒体元素。

'use client';

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';

export const AlignKit = [
  TextAlignPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'start',
        nodeKey: 'align',
        styleKey: 'textAlign',
        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      },
      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
    },
  }),
];
  • 配置 Paragraph、Heading、Image 和 Media 元素支持 align 属性
  • 提供对齐选项：start、left、center、right、end、justify

添加套件

将套件添加到插件列表：

import { createPlateEditor } from 'platejs/react';
import { AlignKit } from '@/components/editor/plugins/align-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...AlignKit,
  ],
});

手动配置

安装

pnpm add @platejs/basic-styles

添加插件

在创建编辑器时，将 TextAlignPlugin 加入 Plate 插件数组。

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    TextAlignPlugin,
  ],
});

配置插件

可以配置 TextAlignPlugin 来指定目标元素和定义对齐选项。

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    TextAlignPlugin.configure({
      inject: {
        nodeProps: {
          nodeKey: 'align',
          defaultNodeValue: 'start',
          styleKey: 'textAlign',
          validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
        },
        targetPlugins: [...KEYS.heading, KEYS.p],
      },
    }),
  ],
});
  • inject.nodeProps.nodeKey: 注入到目标元素的属性名（默认为 align）。如需使用其他属性名可设置为 'textAlign'
  • inject.nodeProps.defaultNodeValue: 设置默认对齐方式（start）
  • inject.nodeProps.styleKey: 将注入属性映射到 CSS 的 textAlign 属性
  • inject.nodeProps.validNodeValues: 定义有效的对齐值用于 UI 控制
  • inject.targetPlugins: 插件键名数组，指定哪些元素类型会接收对齐属性

添加工具栏按钮

可以在工具栏中添加 AlignToolbarButton 来控制文本对齐。

插件

TextAlignPlugin

用于设置块级元素内文本对齐的插件。它会向 inject.targetPlugins 指定的元素注入 align 属性。

Optionsobject

Collapse all

    注入到目标元素的属性名

    • 默认值: 'align'

    默认文本对齐值

    • 默认值: 'start'

    样式使用的 CSS 属性名

    • 默认值: 'textAlign'

    有效对齐值数组

    • 默认值: ['start', 'left', 'center', 'right', 'end', 'justify']

    需要注入对齐属性的插件键名数组

    • 默认值: ['p']

转换方法

tf.textAlign.setNodes

为已配置为此插件目标的选定块节点设置对齐方式。

Parameters

Collapse all

    对齐值（如 'left'、'center'、'right'、'justify'）

    setNodes 函数的配置选项

ListText Align