Set CKEditor height in Vue.js

Question

I was trying out ckeditor5 in Vue.js, and I came across a problem of not being able to set it's height manually, below is my code please let me know if I am doing anything wrong.

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

data() {
        return {
            editor: Editor,
            editorData: '',
            editorConfig: {
                height: '500px'
            }
        }

score 10 · Accepted Answer · edited Feb 18 '20 at 15:28

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>

Set CKEditor height in Vue.js

1 Answers1