CKEditor 5 工具栏配置完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01017/article/details/148416416

CKEditor 5 工具栏配置完全指南

ckeditor5 具有模块化架构、现代集成和协作编辑等功能的强大富文本编辑器框架项目地址: https://gitcode.com/gh_mirrors/ck/ckeditor5

什么是CKEditor 5工具栏

CKEditor 5的工具栏是编辑器的核心用户界面组件，它为用户提供了访问所有编辑功能的便捷入口。通过精心设计的工具栏，用户可以轻松实现文本格式化、内容管理、元素插入等各种操作。

基础工具栏配置

基本配置方法

配置工具栏最简单的方式是提供一个包含功能按钮名称的数组：

ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList']
    })
    .catch(error => {
        console.log(error);
    });

工具栏分组分隔符

使用竖线符号'|'可以在工具栏中创建视觉分隔，帮助用户更好地理解功能分组：

toolbar: ['bold', 'italic', '|', 'undo', 'redo', '|', 'numberedList', 'bulletedList']

高级工具栏配置

扩展配置格式

CKEditor 5提供了更灵活的扩展配置格式，允许开发者访问更多高级选项：

toolbar: {
    items: [
        'undo', 'redo',
        '|',
        'heading',
        '|',
        'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
        '|',
        'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
        '|',
        'link', 'uploadImage', 'blockQuote', 'codeBlock',
        '|',
        'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent'
    ],
    shouldNotGroupWhenFull: false
}

配置选项详解

items - 定义工具栏项目数组，可以包含按钮名称、分组分隔符('|')和换行符('-')
removeItems - 指定要从默认工具栏中移除的项目
shouldNotGroupWhenFull - 控制工具栏溢出时的行为(默认false表示自动分组)

多行工具栏配置

自动换行模式

当设置shouldNotGroupWhenFull: true时，工具栏项目会在空间不足时自动换行：

toolbar: {
    items: [...],
    shouldNotGroupWhenFull: true
}

显式换行控制

使用'-'符号可以显式指定换行位置：

toolbar: {
    items: [
        'undo', 'redo', '|', 'heading', '|', 'bold', 'italic',
        '-', // 这里换行
        '|', 'link', 'imageUpload'
    ],
    shouldNotGroupWhenFull: true
}

下拉菜单式工具栏

为了节省空间或按主题组织功能，可以将相关按钮分组到下拉菜单中：

基本下拉菜单配置

toolbar: [
    {
        label: '更多样式',
        icon: 'threeVerticalDots',
        items: ['strikethrough', 'superscript', 'subscript']
    }
]

下拉菜单自定义选项

显示文本标签 - 使用withText: true显示文本而非图标
自定义图标 - 通过icon属性指定预定义图标或自定义SVG
工具提示 - 使用tooltip属性提供更详细的描述

特殊工具栏类型

浮动工具栏(Balloon Toolbar)

浮动工具栏是Balloon和Balloon Block编辑器特有的工具栏类型，它会在用户选择内容时动态出现，而不是固定在编辑区域。

块工具栏(Block Toolbar)

块工具栏是显示在内容区域左侧的附加工具栏，特别适用于主工具栏不可访问的情况。要启用块工具栏：

BalloonEditor.create(document.querySelector('#editor'), {
    blockToolbar: [
        'paragraph', 'heading1', 'heading2', '|',
        'bulletedList', 'numberedList', '|',
        'imageUpload'
    ]
})