Set CKEditor height in Vue.js [duplicate] Set CKEditor height in Vue.js [duplicate] vue.js vue.js

Set CKEditor height in Vue.js [duplicate]


Classic editor (CKEditor 5) no longer encapsulates the editing area in an , which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the height setting can be achieved with :

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

or

.ck-content { height:500px; }.

2020 Note: when working with single page Vue components, do not scope the CSS you want to add to ckeditor, as it's elements are rendered separately from Vue and no data attributes are added to them. In other words, don't do this, as it will not work:

<style scoped> /* don't add "scoped"; note that this will also globalize the CSS for all editors in your project */    .ck-editor__editable {        min-height: 5000px;    }</style>