分栏

PreviousNext

Add columns to your document.

分栏节点
Loading…

功能特性

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

套件使用

安装

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

'use client';
 
import { ColumnItemPlugin, ColumnPlugin } from '@platejs/layout/react';
 
import { ColumnElement, ColumnGroupElement } from '@/components/ui/column-node';
 
export const ColumnKit = [
  ColumnPlugin.withComponent(ColumnGroupElement),
  ColumnItemPlugin.withComponent(ColumnElement),
];
'use client';
 
import { ColumnItemPlugin, ColumnPlugin } from '@platejs/layout/react';
 
import { ColumnElement, ColumnGroupElement } from '@/components/ui/column-node';
 
export const ColumnKit = [
  ColumnPlugin.withComponent(ColumnGroupElement),
  ColumnItemPlugin.withComponent(ColumnElement),
];

添加套件

将套件加入插件列表：

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

手动配置

安装

pnpm add @platejs/layout
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';
 
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),
  ],
});
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),
  ],
});

转换为工具栏按钮

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

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

插件

ColumnPlugin

为文档添加分栏功能。

ColumnItemPlugin

为文档添加分栏项功能。

类型定义

TColumnGroupElement

继承自 TElement。

TColumnElement

继承自 TElement。

Attributes

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

转换方法

insertColumnGroup

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

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

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

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

    其他控制插入行为的选项

insertColumn

插入一个空栏。

OptionsInsertNodesOptions & { width?: string }

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

    其他控制插入行为的选项

moveMiddleColumn

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

Parameters

    分栏元素的节点 entry

    控制中间栏移动方向

Returnsboolean

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

toggleColumnGroup

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

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

Optionsobject

    切换分栏组的位置

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

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

setColumns

更新现有分栏组的布局。

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

Optionsobject

    分栏组元素的路径

    要创建的等宽分栏数量

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

钩子函数

useDebouncePopoverOpen

Returnsboolean

    弹窗是否处于打开状态