行高

PreviousNext
行高工具栏按钮
Loading...

功能特性

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

套件使用

安装

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

  • 配置 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

  • inject.nodeProps.defaultNodeValue optional number

    默认行高值

  • inject.nodeProps.validNodeValues optional number[]

    有效行高值数组

  • inject.targetPlugins optional string[]

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

    • 默认值: ['p']

转换器

tf.lineHeight.setNodes

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

Parameters

Collapse all

  • value number

    行高值

  • options optional SetNodesOptions

    setNodes 函数的配置选项

IndentLine Height