行高

PreviousNext

Adjust the height between lines of text.

行高工具栏按钮
Loading…

功能特性

  • 为段落、标题等块级元素应用自定义行高
  • 向目标块级元素注入 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],
    },
  }),
];
'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,
  ],
});
import { createPlateEditor } from 'platejs/react';
import { LineHeightKit } from '@/components/editor/plugins/line-height-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...LineHeightKit,
  ],
});

手动配置

安装

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

添加插件

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

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

    默认行高值

    有效行高值数组

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

    • 默认值: ['p']

转换器

tf.lineHeight.setNodes

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

Parameters

    行高值

    setNodes 函数的配置选项