如何解决 CKEditor 工具栏插件弹出面板溢出问题？

vue.js

2024-03-10 08:14:51

解决 CKEditor 工具栏插件弹出面板溢出问题的终极指南

引言

当使用 CKEditor 版本 5 时，工具栏插件中的弹出面板可能会溢出父容器的边界，导致用户无法完全查看或访问这些面板。本文将深入探讨这个问题，并提供详细的解决方案。

问题分析

此问题是由 CKEditor 使用内联样式控制其弹出面板的位置和大小所导致的。这些内联样式会优先于外部 CSS 样式，因此难以使用 CSS 修复此问题。

解决方案：使用 CKEditor 插件

解决此问题的最佳方法是使用专门的 CKEditor 插件。这些插件修改了 CKEditor 的行为，使其弹出面板不会溢出父容器。一些流行的插件包括：

Floating Panels: https://github.com/ckeditor/ckeditor5-floating-panels
Popup Side: https://github.com/ckeditor/ckeditor5-popup-side

安装和配置插件

要安装和配置这些插件，请按照以下步骤操作：

使用 npm 安装插件：

npm install --save-dev ckeditor5-floating-panels

在你的 CKEditor 配置中导入插件：

import FloatingPanels from '@ckeditor/ckeditor5-floating-panels/src/floatingpanels';

ClassicEditor
    .create( editorElement, {
        plugins: [FloatingPanels]
    })
    .then(editor => {
        console.log( 'Editor was initialized', editor );
    })
    .catch(error => {
        console.error(error.stack);
    });

测试效果

安装并配置插件后，工具栏插件中的弹出面板将不再溢出父容器。它们将整齐地显示在容器内，让用户可以轻松访问和使用。

其他注意事项