Blazor中如何阻止CKEditor5编辑区收缩？是否支持最小高度设置？

我在Blazor中使用CKEditor5 Classic（37.1.0）版本，编写了如下JavaScript代码：

function loadEditor() {
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            editor.ui.view.editable.element.style.height = '400px';
        })
        .catch(error => {
            console.error(error);
        });
}

点击编辑器区域时，编辑区会发生收缩，想知道如何阻止这种收缩，或者CKEditor5是否支持设置最小高度（min-height）选项。

问题演示：

对应的Razor页面代码：

<MudPaper Elevation="0" Class="mt-5">
    <div id="editor">
        <p></p>
    </div>
</MudPaper>

方法1：通过CKEditor配置直接设置高度与最小高度 #

CKEditor5原生支持初始化时配置height和minHeight参数，这是最推荐的方案，无需手动修改DOM样式：

function loadEditor() {
    ClassicEditor
        .create(document.querySelector('#editor'), {
            // 设置初始高度
            height: 400,
            // 设置最小高度，防止编辑区收缩
            minHeight: 400
        })
        .catch(error => {
            console.error(error);
        });
}

方法2：通过CSS强制锁定最小高度 #

如果不想修改编辑器初始化配置，可直接给编辑器可编辑区域添加全局/组件内CSS样式：

.ck-editor__editable_inline {
    min-height: 400px !important;
    height: 400px !important;
}

使用!important是为了覆盖CKEditor默认的内联样式，确保自定义规则生效。

方法3：优化原有DOM样式修改逻辑 #

如果坚持通过编辑器实例修改样式，需同时设置height和minHeight，避免内容为空时触发收缩：

function loadEditor() {
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            const editableElement = editor.ui.view.editable.element;
            editableElement.style.height = '400px';
            editableElement.style.minHeight = '400px';
        })
        .catch(error => {
            console.error(error);
        });
}

原理说明 #

CKEditor5的可编辑区域默认会根据内容高度自适应调整，点击空编辑器时内容高度降低，就会触发收缩。设置minHeight后，即使内容为空，编辑区也会保持指定的最小高度，不会收缩。

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