8
A
回答
21
回答我自己的問題,因爲它可能會幫助別人。
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>
相關問題
- 1. wysiwyg contenteditable編輯器 - 如何設置富文本編輯器的最大長度
- 2. Angular2的CKEditor編輯配置
- 3. CKEditor。如何關閉自動增長(設置不變高度)
- 4. 如何以編程方式設置編輯文本的佈局高度
- 5. 如何爲我的文本編輯器設置最大長度
- 6. 如何將JavaFx HTML編輯器設置爲更小的寬度
- 7. 將寬度和高度設置爲100%對於編輯控件
- 8. ng2-ckeditor當編輯器不自動加載時如何將焦點設置到編輯器
- 9. CKEditor 3.0高度
- 10. 編輯高度的UIToolbar
- 11. 如何設置TextBlock高度
- 12. 如何設置ListView高度
- 13. 如何設置jqModal的高度寬度?
- 14. 是mifare經典可編輯的UID嗎?
- 15. Wordpress tinymce編輯器高度錯誤
- 16. 如何在Joomla中設置微小的MCE編輯器來自動填充寬度和高度?
- 17. CodeMirror:如何限制編輯器的高度
- 18. 如何提高IntelliJ代碼編輯器的速度?
- 19. UltraEdit Java編輯器設置
- 20. 編輯文本的設置長度
- 21. CKEditor 5 InlineEditor - 如何配置工具欄?
- 22. CKEditor的 - 編輯CONTENTEDITABLE格之外編輯
- 23. Rails/Ckeditor如何更改高度?
- 24. 設置高度
- 25. 設置高度
- 26. 基於ckeditor-div的編輯器
- 27. 高度摩納哥編輯
- 28. jQuery:設置ckeditor baseurl
- 29. ckeditor編輯頁面
- 30. CKEDITOR在線編輯