对齐与分布

AlignPlugin 由 createEditorHost() 默认安装，在工具栏注册对齐按钮。对齐和分布操作通过命令执行，支持撤销重做。

对齐操作

通过 AlignElementsCommand 执行对齐。构造函数签名为 new AlignElementsCommand(host, alignment, elementIds)：

import { AlignElementsCommand } from 'vkedit'

const elementIds = ['el-1', 'el-2', 'el-3']

// 左对齐
host.executeCommand(new AlignElementsCommand(host, 'left', elementIds))

// 右对齐
host.executeCommand(new AlignElementsCommand(host, 'right', elementIds))

// 水平居中
host.executeCommand(new AlignElementsCommand(host, 'centerX', elementIds))

// 垂直居中
host.executeCommand(new AlignElementsCommand(host, 'centerY', elementIds))

// 顶部对齐
host.executeCommand(new AlignElementsCommand(host, 'top', elementIds))

// 底部对齐
host.executeCommand(new AlignElementsCommand(host, 'bottom', elementIds))

分布操作

通过 DistributeElementsCommand 执行均分。构造函数签名为 new DistributeElementsCommand(host, direction, elementIds)：

import { DistributeElementsCommand } from 'vkedit'

// 水平均分
host.executeCommand(new DistributeElementsCommand(host, 'horizontal', elementIds))

// 垂直均分
host.executeCommand(new DistributeElementsCommand(host, 'vertical', elementIds))

对齐方向速查

方向	值	说明
左对齐	'left'	所有元素左边缘对齐到最左侧
右对齐	'right'	所有元素右边缘对齐到最右侧
水平居中	'centerX'	所有元素水平中心对齐
垂直居中	'centerY'	所有元素垂直中心对齐
顶部对齐	'top'	所有元素上边缘对齐到最顶部
底部对齐	'bottom'	所有元素下边缘对齐到最底部

注意大小写

对齐方向值区分大小写：水平居中是 'centerX'（大写 X），垂直居中是 'centerY'（大写 Y）。

最低元素数量

操作	最低数量	说明
对齐	1 个	对齐操作对 1 个以上元素生效
分布	3 个	分布操作需要至少 3 个元素（首尾元素固定，中间元素均分间距）

工具栏按钮

AlignPlugin 安装后会在工具栏注册对齐按钮组件（由 Align.vue 渲染），点击按钮即可对当前选中元素执行对齐操作。

下一步

• AlignPlugin API -- 完整 API 参考
• 撤销与重做 -- 对齐操作可通过命令撤销