CKEditor5：如何在外部文件定义工具栏并通过名称引用？

完全可以把不同的工具栏配置抽离到独立文件中，通过名称直接引用，这样能大幅提升代码复用性和可维护性。下面是具体实现方案：

1. 创建独立的工具栏配置文件 #

新建一个比如ckeditor-toolbar-configs.js的文件，在里面定义并导出不同的工具栏配置：

// ckeditor-toolbar-configs.js
export const basicToolbar = [
    'heading', '|',
    {
        label: '基础格式',
        icon: false,
        items: ['bold', 'italic', 'link', 'bulletedList', 'numberedList']
    },
    '|',
    'undo', 'redo'
];

export const advancedToolbar = [
    'heading', '|',
    {
        label: 'Basic Settings',
        icon: false,
        items: ['bold', 'italic', 'link', 'strikethrough', 'bulletedList', 'numberedList', 'link', 'outdent', 'indent', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor']
    },
    '|',
    {
        label: 'Media',
        icon: false,
        items: ['uploadImage', 'insertTable', 'mediaEmbed']
    },
    '|',
    'alignment', 'code', 'selectAll', 'removeFormat', 'findAndReplace', 'undo', 'redo', 'sourceEditing'
];

如果你的项目不支持ES模块，可以改用全局变量的方式：

// ckeditor-toolbar-configs.js
window.CKEditorToolbars = {
    basicToolbar: [/* 基础配置内容 */],
    advancedToolbar: [/* 高级配置内容 */]
};

2. 在页面中引用配置并初始化编辑器 #

方式一：ES模块环境 #

在页面脚本中导入配置，然后直接传入编辑器初始化参数：

<script type="module">
    import { basicToolbar, advancedToolbar } from './ckeditor-toolbar-configs.js';

    // 初始化基础版编辑器
    ClassicEditor
        .create(document.querySelector("#basic-editor"), {
            toolbar: basicToolbar
        })
        .catch(error => {
            console.log(error);
        });

    // 初始化高级版编辑器
    ClassicEditor
        .create(document.querySelector("#advanced-editor"), {
            toolbar: advancedToolbar
        })
        .catch(error => {
            console.log(error);
        });
</script>

方式二：全局变量环境 #

先引入配置文件，再初始化编辑器：

<script src="./ckeditor-toolbar-configs.js"></script>
<script>
    // 初始化基础版编辑器
    ClassicEditor
        .create(document.querySelector("#basic-editor"), {
            toolbar: window.CKEditorToolbars.basicToolbar
        })
        .catch(error => {
            console.log(error);
        });

    // 初始化高级版编辑器
    ClassicEditor
        .create(document.querySelector("#advanced-editor"), {
            toolbar: window.CKEditorToolbars.advancedToolbar
        })
        .catch(error => {
            console.log(error);
        });
</script>

额外提示 #

• 可以根据需求扩展更多配置项，比如把编辑器的其他配置（比如语言、图片上传设置等）也一并抽离到配置文件中，形成完整的编辑器配置集合。
• 如果使用构建工具（如Webpack、Vite），可以直接将配置文件作为模块导入，无需额外处理脚本类型。

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