如何设置CKEditor 5的高度(经典编辑器)
如何设置CKEditor 5的高度(经典编辑器)
提问于 2017-10-04 15:31:32
在CKEditor 4中，为了改变编辑器的高度，有一个配置选项：config.height。
如何更改CKEditor 5的高度？(经典编辑器)
回答 24
Stack Overflow用户
发布于 2017-10-04 15:31:32
回答我自己的问题，因为这可能会对别人有所帮助。
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的高度是行不通的。
在HTML5(经典编辑器)呈现之后，简化的CKEditor结构如下所示：
<!-- 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>实际上，超文本标记语言要复杂得多，因为要呈现整个CKEditor UI。然而，最重要的元素是用ck-editor__editable_inline类标记的“编辑区”(或“编辑框”)：
<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>“编辑区域”是一个白色矩形，用户可以在其中输入文本。因此，要设置/更改编辑区域的高度，只需使用CSS定位可编辑元素就足够了：
<style>
.ck-editor__editable_inline {
min-height: 400px;
}
</style>Stack Overflow用户
发布于 2018-12-17 01:55:03
Setting the height via a global stylesheet.只需添加到您的通用.css文件(如style.css)：
.ck-editor__editable {
min-height: 500px;
}Stack Overflow用户
发布于 2020-07-03 15:24:07
在ReactJS的情况下。
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
onInit={(editor) => {
// You can store the "editor" and use when it is needed.
// console.log("Editor is ready to use!", editor);
editor.editing.view.change((writer) => {
writer.setStyle(
"height",
"200px",
editor.editing.view.document.getRoot()
);
});
}}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46559354
复制相关文章
相似问题
腾讯云开发者
