如何设置CKEditor 5（经典编辑器）的高度

Question

在CKEditor 4中改变编辑器高度有一个配置选项：config.height。

如何更改CKEditor 5的高度？ （经典编辑）

Answer 1

回答我自己的问题，因为它可能会帮助别人。

CKEditor 5不再具有更改其高度的配置设置。 使用CSS可以轻松控制高度。

有一个棘手的事情不过，如果你使用经典的编辑器：

<div id="editor1"></div> 

ClassicEditor 
    .create(document.querySelector('#editor1')) 
    .then(editor => { 
     // console.log(editor); 
    }) 
    .catch(error => { 
     console.error(error); 
    }); 

那么经典的编辑器将隐藏原始元素（id为editor1）和渲染旁边。这就是为什么通过CSS改变高度#editor1不起作用的原因。

简化的HTML结构，CKEditor的5（经典的编辑器）之后呈现，如下所示：

<!-- This one gets hidden --> 
<div id="editor1" style="display:none"></div> 
<div class="ck-reset ck-editor..." ...> 
    <div ...> 
     <!-- This is the editable element --> 
     <div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true"> 
      ... 
     </div> 
    </div> 
</div> 

在现实中的HTML要复杂得多，因为整个CKEditor的UI呈现。然而最重要的要素是“编辑区域”打上ck-editor__editable类（或“编辑框”）：

<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div> 

的“编辑区”是白色长方形，其中一个可以输入文本。因此，要设置/更改编辑区域的高度，使用CSS定位可编辑元素就足够了：

<style> 
.ck-editor__editable { 
    min-height: 400px; 
} 
</style>