如何設置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>