CKEditor 拓展：工具栏自动折叠，释放编辑空间

前言

CKEditor是一款强大的富文本编辑器，在许多 Web 应用中得到了广泛应用。默认情况下，CKEditor 的工具栏包含了许多按钮和选项，这可能会占用相当大的编辑器空间。对于某些应用场景，我们需要最大化编辑器显示区域，而工具栏中的某些按钮可能使用频率较低。因此，本文将介绍一种给 CKEditor 添加工具栏自动折叠功能的方法，以满足上述需求。

实现原理

要实现工具栏自动折叠功能，我们需要使用 CKEditor 的插件机制。插件是一种扩展 CKEditor 功能的方式，而无需修改其核心代码。

具体来说，我们将编写一个插件来监控编辑器窗口的宽度。当窗口宽度小于特定阈值时，插件会自动折叠工具栏中的一行或多行按钮。当窗口宽度增加时，插件会展开折叠的工具栏。

代码实现

以下是如何编写 CKEditor 工具栏自动折叠插件的代码示例：

CKEDITOR.plugins.add('toolbar_auto_fold', {
    init: function(editor) {
        // 定义工具栏自动折叠的阈值（单位：像素）
        var foldThreshold = 800;

        // 创建一个事件侦听器，用于监视编辑器窗口的宽度
        editor.on('instanceReady', function() {
            window.addEventListener('resize', function() {
                // 获取编辑器窗口的宽度
                var width = editor.container.getSize().width;

                // 根据宽度自动折叠工具栏
                if (width < foldThreshold) {
                    editor.ui.space('top').hide();
                } else {
                    editor.ui.space('top').show();
                }
            });
        });
    }
});

使用插件

要使用此插件，只需在你的 CKEditor 配置中注册它：

CKEDITOR.replace('editor', {
    extraPlugins: 'toolbar_auto_fold'
});

结语

通过添加工具栏自动折叠功能，我们成功地扩展了 CKEditor 的功能。这使得编辑器能够根据可用宽度自动调整其工具栏，从而释放更多编辑空间。该功能对于需要最大化编辑器显示区域的应用非常有用，例如移动设备上的编辑器或具有窄窗口的应用。

本文展示了如何使用 CKEditor 的插件机制来实现定制功能。通过编写和注册插件，我们可以轻松地扩展 CKEditor 的功能，满足特定的应用需求。