How set height of ckeditor with vuejs component

Hello!

In my Laravel 5/vuejs 2.6 / app I want to use ckeditor and I installed https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html package and using it I can not change default height of the component, like :

<template>
   <div class="container">
        ...
         <div style="display:flex; flex:2" class="p-2">
            <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" :height="120" :rows="6"></ckeditor>
         </div>

        ...
import CKEditor from '@ckeditor/ckeditor5-vue';  //https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Vue.use(CKEditor);
export default {
    data: function () {

    return {
        ...
        editor: ClassicEditor,
        editorData: '<p>Content of the editor.</p>',
        editorConfig: {
            // The configuration of the editor.
            indent_style: 'tab',
            tab_width: 4,
            charset: 'utf-8',
            end_of_line: 'lf',
            trim_trailing_whitespace: true,
            insert_final_newline: true
        }
    }

and adding styles :

<style scoped>
 .ck .ck-reset .ck-editor .ck-rounded-corners {
    min-height: 500px !important;
    border: 2px dotted olive !important;
    background-color: yellow !important;
 }
 .ck-editor__editable {
    min-height: 500px !important;
    border: 2px dotted green !important;
    background-color: yellow !important;
 }

.ck-editor__editable_inline {
   min-height: 500px !important;
   border: 2px dotted blue;
   background-color: yellow !important;
}

:host ::ng-deep .ck-editor__editable_inline {
   min-height: 500px !important;
   border: 2px dotted red !important;
   background-color: yellow !important;
}

You can look at it live : http://hostels2.my-demo-apps.tk/test Which way is correct ?

Thanks!

cometads

6 years ago

Level 3

None of your selectors actually exists in your example as far as I can tell.

Adding min-height to the ck-content div should do the trick:

.ck-editor .ck-editor__main .ck-content {
    min-height: 500px;
}

You're not overriding an existing min-height on the element so the !important is not necessary.

Also, it might be necessary to remove the scoped style.

1 like

mstdmstd

6 years ago

Level 8

Thank you! your css code was helpfull, if to remove scoped in style definition. Could you please explain why ? as this css was defined in 1 vue file. I expected that all styles inside of

<style scoped>

would be applied to this page fully?

cometads

6 years ago

Best Answer

Level 3

You can learn more about scoped styles here: https://vue-loader.vuejs.org/guide/scoped-css.html

But basically scoped styles apply selectors to the css such that those styles are applied only to elements in the current component. Since CKEditor is a component itself, the scoped styles are not applied to it.

In general you should always apply css overrides meant for third party packages globally to avoid issues like this.

ChanningD

6 years ago

Level 1

Answering this because I couldnt find the answer on google, if you're using CKEditor5 and want to change the height without using css you can use the following code:


<ckeditor :editor="editor" :config="config" @ready="ready"></ckeditor>

Then in your methods do this:


ckEditorReady(editor) {
      editor.ui.view.editable.element.style.minHeight = '100px'
}

There are a ton of other ui elements you can change this way if you console.log(editor.ui.view.editable.element.style).

phamduchuy552

3 years ago

Level 1

Just declaring a piece of information. Document here

Classic editor (CKEditor 5) no longer encapsulates the editing area in an <iframe>, 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 .ck-editor__editable_inline { height:400px; }.

So from CKeditor 5, you are able to control the height manually. I myself prefer having all of them in one configuration file

1 like

Please or to participate in this conversation.