分栏

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>
  );
}
Column layout.
column-demo
column-demo

功能特性

  • 在文档中添加分栏布局
  • 通过 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),
];

添加套件

将套件加入插件列表：

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),
  ],
});

转换为工具栏按钮

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

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

插件

ColumnPlugin

为文档添加分栏功能。

ColumnItemPlugin

为文档添加分栏项功能。

类型定义

TColumnGroupElement

继承自 TElement。

TColumnElement

继承自 TElement。

Attributes

Collapse all

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

转换方法

insertColumnGroup

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

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

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

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

    其他控制插入行为的选项

insertColumn

插入一个空栏。

OptionsInsertNodesOptions & { width?: string }

Collapse all

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

    其他控制插入行为的选项

moveMiddleColumn

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

Parameters

Collapse all

    分栏元素的节点 entry

    控制中间栏移动方向

Returnsboolean

Collapse all

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

toggleColumnGroup

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

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

Optionsobject

Collapse all

    切换分栏组的位置

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

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

setColumns

更新现有分栏组的布局。

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

Optionsobject

Collapse all

    分栏组元素的路径

    要创建的等宽分栏数量

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

钩子函数

useDebouncePopoverOpen

Returnsboolean

Collapse all

    弹窗是否处于打开状态

Code BlockColumn