如何将CKEditor 5工具栏拆分为左右两段并分散排列？

嘿，这个需求完全可以实现，我给你两种靠谱的思路，其中第一种更符合你想要的配置化分隔方式：

方法一：自定义分隔符插件 + DOM重构（推荐） #

这种方式能让你在工具栏配置里用自定义标识来拆分工具栏，自动生成你想要的两端对齐布局。

步骤1：注册自定义分隔符插件 #

首先，我们需要给CKEditor注册一个特殊的分隔符插件，用来作为布局拆分的标记：

import { Plugin } from '@ckeditor/ckeditor5-core';
import { ToolbarSeparatorView } from '@ckeditor/ckeditor5-ui';

export class SpaceSeparator extends Plugin {
    static get pluginName() {
        return 'SpaceSeparator';
    }

    init() {
        const editor = this.editor;
        // 注册一个名为space-separator的工具栏组件
        editor.ui.componentFactory.add('space-separator', () => {
            const separator = new ToolbarSeparatorView();
            // 给这个分隔符加唯一类名，方便后续DOM操作
            separator.element.classList.add('toolbar-space-separator');
            return separator;
        });
    }
}

别忘了在编辑器初始化时引入这个插件哦。

步骤2：修改工具栏配置 #

把你原来的=换成我们刚注册的space-separator：

toolbar: [
 'heading', 'bold', 'italic', 'underline',
 'space-separator', // 替代原来的=作为分隔标记
 'alignment:left', 'alignment:right', 'alignment:center'
],

步骤3：编辑器初始化后重构工具栏DOM #

在编辑器就绪后，我们找到那个特殊分隔符，把前后的按钮分别包裹进分组容器，再设置flex布局：

// 假设你已经初始化了editor实例
editor.on('ready', () => {
    const toolbarElement = editor.ui.view.toolbar.element;
    const separator = toolbarElement.querySelector('.toolbar-space-separator');
    if (!separator) return;

    // 创建左右两个分组容器
    const leftGroup = document.createElement('div');
    leftGroup.classList.add('toolbar-left-group');
    const rightGroup = document.createElement('div');
    rightGroup.classList.add('toolbar-right-group');

    // 把分隔符左侧的所有按钮移到左分组
    let prevSibling = separator.previousElementSibling;
    while (prevSibling) {
        const temp = prevSibling.previousElementSibling;
        leftGroup.prepend(prevSibling);
        prevSibling = temp;
    }

    // 把分隔符右侧的所有按钮移到右分组
    let nextSibling = separator.nextElementSibling;
    while (nextSibling) {
        const temp = nextSibling.nextElementSibling;
        rightGroup.append(nextSibling);
        nextSibling = temp;
    }

    // 清空原工具栏，添加分组，移除无用的分隔符
    toolbarElement.innerHTML = '';
    toolbarElement.append(leftGroup, rightGroup);
    separator.remove();

    // 设置工具栏的flex布局，实现两端对齐
    toolbarElement.style.display = 'flex';
    toolbarElement.style.justifyContent = 'space-between';
    toolbarElement.style.alignItems = 'center';
});

步骤4：补充样式（可选） #

给左右分组加一点间距，和默认工具栏保持一致：

.toolbar-left-group, .toolbar-right-group {
    display: flex;
    gap: 4px; /* 和CKEditor默认按钮间距匹配 */
}

方法二：纯CSS快速实现（适合固定配置） #

如果你的工具栏按钮数量不会变动，也可以用纯CSS来快速调整布局，不用写插件：

/* 把工具栏改成flex布局 */
.ck.ck-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 把右侧按钮组整体靠右：假设前5个元素是左侧按钮+默认分隔符，从第6个开始是右侧按钮 */
.ck.ck-toolbar .ck-button:nth-child(n+6) {
    margin-left: auto;
}

这种方法的缺点是不够灵活，如果后续修改工具栏配置，需要同步调整CSS选择器。

内容的提问来源于stack exchange，提问作者Devz