Grapesjs集成Ckeditor插件：文本框过小导致工具栏遮挡文本无法编辑怎么解决？

我用Grapesjs结合grapesjs-mjml与gjs-plugin-ckeditor插件构建了邮件编辑器，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="libs/css/grapes.min.css">

    <script src="libs/grapes.min.js"></script>

    <script src="libs/mjml/index.js"></script>

    <script src="libs/grapesjs-plugin-ckeditor.min.js"></script>
    <script src="libs/ckeditor/ckeditor.js"></script>

</head>
<body>

<div id="gjs">
    <mjml>
        <mj-body>
            <!-- Your MJML body here -->
            <mj-section>
                <mj-column>
                    <mj-text>My Company</mj-text>
                </mj-column>
            </mj-section>
        </mj-body>
    </mjml>
</div>

<script type="text/javascript">
    var editor = grapesjs.init({
        fromElement: true,
        container: '#gjs',
        style: '.txt-red{color: red}',
        plugins: ['grapesjs-mjml', 'gjs-plugin-ckeditor'],
        pluginsOpts: {
            'grapesjs-mjml': {},
            'gjs-plugin-ckeditor': {}
        }
    });
</script>

</body>
</html>

当前遇到的问题：当文本框尺寸过小时，CKEditor的工具栏会遮挡文本内容，导致无法正常编辑文本。

可以通过以下几种调整设置的方式解决：

1. 让CKEditor工具栏自动换行或浮动 #

修改gjs-plugin-ckeditor的配置，给CKEditor添加实例配置，让工具栏在空间不足时自动换行，或者设置为浮动模式：

var editor = grapesjs.init({
    // ... 其他原有配置
    pluginsOpts: {
        'grapesjs-mjml': {},
        'gjs-plugin-ckeditor': {
            options: {
                toolbar: {
                    shouldNotGroupWhenFull: true, // 空间不足时自动换行
                    items: [
                        'Bold', 'Italic', 'Underline', 'Strike', 'Link', 'Unlink', 'NumberedList', 'BulletedList'
                    ]
                },
                floating: true // 工具栏浮动显示，不占用文本区域空间
            }
        }
    }
});

2. 简化CKEditor工具栏按钮 #

如果工具栏按钮太多，即使换行也会占用过多空间，可以精简工具栏按钮数量，只保留常用功能：

var editor = grapesjs.init({
    // ... 其他原有配置
    pluginsOpts: {
        'grapesjs-mjml': {},
        'gjs-plugin-ckeditor': {
            options: {
                toolbar: [
                    'Bold', 'Italic', 'Link', 'Unlink' // 只保留核心编辑按钮
                ]
            }
        }
    }
});

3. 给文本框设置最小高度 #

通过GrapesJS的自定义样式，给mj-text元素设置最小高度，避免文本框过小：

var editor = grapesjs.init({
    fromElement: true,
    container: '#gjs',
    style: '.txt-red{color: red}; .mj-text{min-height: 80px;}', // 添加最小高度样式
    plugins: ['grapesjs-mjml', 'gjs-plugin-ckeditor'],
    pluginsOpts: {
        'grapesjs-mjml': {},
        'gjs-plugin-ckeditor': {}
    }
});

4. 调整CKEditor编辑器的弹出位置 #

修改插件配置，让编辑器弹出时向下偏移，避开文本区域：

var editor = grapesjs.init({
    // ... 其他原有配置
    pluginsOpts: {
        'grapesjs-mjml': {},
        'gjs-plugin-ckeditor': {
            position: {
                top: '100%', // 编辑器顶部对齐文本框底部
                left: '0'
            }
        }
    }
});

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