行高

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>
  );
}
Line height adjustment controls.
line-height-demo
line-height-demo

功能特性

  • 为段落、标题等块级元素应用自定义行高
  • 向目标块级元素注入 lineHeight 属性

套件使用

安装

最快捷的方式是使用 LineHeightKit，它包含预配置的 LineHeightPlugin，针对段落和标题元素。

'use client';

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

export const LineHeightKit = [
  LineHeightPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 1.5,
        validNodeValues: [1, 1.2, 1.5, 2, 3],
      },
      targetPlugins: [...KEYS.heading, KEYS.p],
    },
  }),
];
  • 配置 Paragraph 和 Heading 元素（H1-H6）支持 lineHeight 属性
  • 提供默认行高值 1.5 和有效值 [1, 1.2, 1.5, 2, 3]

添加套件

将套件添加到插件中：

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

手动配置

安装

pnpm add @platejs/basic-styles

添加插件

在创建编辑器时将 LineHeightPlugin 包含到 Plate 插件数组中。

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

配置插件

您可以配置 LineHeightPlugin 来指定目标元素并定义默认或有效的行高值。

import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    LineHeightPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5, 2, 3],
        },
        targetPlugins: [KEYS.p, KEYS.h1, KEYS.h2, KEYS.h3],
      },
    }),
  ],
});
  • inject.nodeProps.defaultNodeValue: 设置默认行高值（如 1.5）
  • inject.nodeProps.validNodeValues: 定义常用行高值列表，适用于工具栏下拉菜单
  • inject.targetPlugins: 插件键名数组（如 KEYS.p, KEYS.h1），指定哪些元素类型将接收 lineHeight 属性

添加工具栏按钮

您可以在工具栏中添加 LineHeightToolbarButton 来控制行高。

插件

LineHeightPlugin

用于设置块级元素行高的插件。它会向 inject.targetPlugins 指定的元素注入 lineHeight 属性。

Optionsobject

Collapse all

    默认行高值

    有效行高值数组

    目标插件键名数组，用于行高注入

    • 默认值: ['p']

转换器

tf.lineHeight.setNodes

为编辑器中选中的节点设置行高。

Parameters

Collapse all

    行高值

    setNodes 函数的配置选项

IndentLine Height