mstdmstd
2 months ago
673
3
Vue

How set height of ckeditor with vuejs component

Posted 2 months ago by mstdmstd

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!

Please sign in or create an account to participate in this conversation.