分栏

分栏节点

功能特性

在文档中添加分栏布局
通过 column-group-node 工具栏选择多种分栏样式
可调整栏宽

套件使用

安装

最快捷的方式是使用 ColumnKit，它包含预配置的 ColumnPlugin 和 ColumnItemPlugin 以及 Plate UI 组件。

ColumnGroupElement: 渲染分栏组容器
ColumnElement: 渲染单个分栏项

添加套件

将套件加入插件列表：

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

手动配置

安装


pnpm add @platejs/layout

添加插件

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

import { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ColumnPlugin,
    ColumnItemPlugin,
  ],
});

配置插件

通过自定义组件配置插件来渲染分栏布局。

import { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';
import { createPlateEditor } from 'platejs/react';
import { ColumnGroupElement, ColumnElement } from '@/components/ui/column-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ColumnPlugin.withComponent(ColumnGroupElement),
    ColumnItemPlugin.withComponent(ColumnElement),
  ],
});

withComponent: 指定 ColumnGroupElement 渲染分栏组容器，ColumnElement 渲染单个分栏。

转换为工具栏按钮

可将此功能添加至转换为工具栏按钮来将区块转为分栏布局：

{
  icon: <Columns3Icon />,
  label: '3栏布局',
  value: 'action_three_columns',
}

插件

`ColumnPlugin`

为文档添加分栏功能。

`ColumnItemPlugin`

为文档添加分栏项功能。

类型定义

`TColumnGroupElement`

继承自 TElement。

`TColumnElement`

继承自 TElement。

Attributes

width optional string
分栏宽度（必须以 % 结尾）

转换方法

`insertColumnGroup`

插入包含两个空栏的分栏组。

OptionsInsertNodesOptions & { columns?: number[] | number }

Collapse all

columns: 栏宽数组或等宽分栏数量（默认：2）
其他 InsertNodesOptions 用于控制插入行为

columns optional number[] | number

栏宽数组或等宽分栏数量（默认：2）

...InsertNodesOptions InsertNodesOptions

其他控制插入行为的选项

`insertColumn`

插入一个空栏。

OptionsInsertNodesOptions & { width?: string }

Collapse all

width optional string

分栏宽度（默认："33%"）

...InsertNodesOptions InsertNodesOptions

其他控制插入行为的选项

`moveMiddleColumn`

将中间栏向左或向右移动。

Parameters

Collapse all

nodeEntry NodeEntry

分栏元素的节点 entry

options { direction: 'left' | 'right' }

控制中间栏移动方向

Returnsboolean

若中间节点为空则返回 false（并移除该节点），否则返回 true。

`toggleColumnGroup`

将区块转换为分栏组布局或更新现有分栏组的布局。

若目标区块不是分栏组，则将其包裹在新的分栏组中并创建指定数量的分栏
若目标区块已是分栏组，则使用 setColumns 更新其布局
原始内容将成为第一栏的内容
其他栏将创建空段落

Optionsobject

Collapse all

at optional Location

切换分栏组的位置

columns optional number

要创建的等宽分栏数量（默认：2）

widths optional string[]

栏宽数组（如 ['50%', '50%']），优先级高于 columns

`setColumns`

更新现有分栏组的布局。

增加分栏时：
- 保留现有栏内容
- 添加指定宽度的新空栏
减少分栏时：
- 将被移除栏的内容合并到最后一栏
- 更新剩余栏的宽度
分栏数量不变时：
- 仅更新栏宽

Optionsobject

Collapse all

at Path

分栏组元素的路径

columns optional number

要创建的等宽分栏数量

widths optional string[]

栏宽数组（如 ['33%', '67%']），优先级高于 columns

钩子函数

`useDebouncePopoverOpen`

Returnsboolean

弹窗是否处于打开状态

Code Block Column