如何设置CKEditor 5（经典编辑器）的高度 [英] How to set the height of CKEditor 5 (Classic Editor)

问题描述

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

In CKEditor 4 to change the editor height there was a configuration option: config.height.

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

How do I change the height of CKEditor 5? (the Classic Editor)

推荐答案

回答我自己的问题，可能会对他人有所帮助。

Answering my own question as it might help others.

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

CKEditor 5 no longer comes with a configuration setting to change its height. The height can be easily controlled with CSS.

但是，如果使用 经典编辑器 ：

There is one tricky thing though, if you use the Classic Editor:

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

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

然后，经典编辑器将隐藏原始元素（ID为 editor1 ）并在其旁边呈现。因此，无法通过CSS更改＃editor1 的高度。

Then the Classic Editor will hide the original element (with id editor1) and render next to it. That's why changing height of #editor1 via CSS will not work.

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

The simplified HTML structure, after CKEditor 5 (the Classic Editor) renders, looks as follows:

<!-- 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_inline 类的编辑区域（或编辑框）：

In reality the HTML is much more complex, because the whole CKEditor UI is rendered. However the most important element is the "editing area" (or "editing box") marked with a ck-editor__editable_inline class:

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

编辑区域是白色矩形，您可以在其中输入文本。因此，要设置样式/更改编辑区域的高度，只需使用CSS定位可编辑元素即可：

The "editing area" is the white rectangle where one can enter the text. So to style / change the height of the editing area, it is enough to target the editable element with CSS:

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

这篇关于如何设置CKEditor 5（经典编辑器）的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！