Adjust CKEditor's height within Vue.js

Question

Adjust CKEditor's height within Vue.js

I recently began experimenting with integrating ckeditor5 into a Vue.js project. However, I encountered an issue where I couldn't manually adjust its height. Below is the code snippet I used - could you please review it and let me know if there are any mistakes?

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

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

css vue.js vuejs2 ckeditor vue-component

Answer 1

Answer №1

With the new version of Classic editor (CKEditor 5), the editing area is no longer encapsulated in a div tag, allowing for easier control of its height and other attributes using CSS. To set the height, you can simply use the following code:

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

Alternatively, you can also use:

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

2020 Update: When working with single page Vue components, avoid scoping the CSS intended for ckeditor, as its elements are rendered separately from Vue without additional data attributes. Essentially, avoid this approach as shown below:

<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>

Answer 2

With the new version of Classic editor (CKEditor 5), the editing area is no longer encapsulated in a div tag, allowing for easier control of its height and other attributes using CSS. To set the height, you can simply use the following code:

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

Alternatively, you can also use:

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

2020 Update: When working with single page Vue components, avoid scoping the CSS intended for ckeditor, as its elements are rendered separately from Vue without additional data attributes. Essentially, avoid this approach as shown below:

<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>

Adjust CKEditor's height within Vue.js

Answer №1

Similar questions

Tips for customizing the appearance of an HTML dropdown menu

Should Vue components be incorporated into blade templates as a best practice?

Incorporating a PHP line into a CSS file that is dynamically generated by PHP code

Need Some Help Reversing the Direction of This CSS Mount Animation?

Automatically adjust the image size in CSS to fit the screen when the iPhone is rotated from portrait to landscape

Having trouble getting my Leaflet map to display even after meticulously following the quick-start guide

Vue: Sending a function to a higher-level component

Is it possible to arrange the final divs on top of the initial ones without any overlap between them?

The function createVNode does not exist in the context of Vue integrated with Laravel

Achieving full coverage of cell content within a cell area by utilizing align-items in CSS Grid

Discrepancy in the vertical pattern repetition of the SVG background

Is it necessary to deactivate CORS in the Spring backend? Unauthorized requests are being prevented from accessing the system

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

What is the reason that em takes precedence over p for font-family?

Error: The function 'check' is not defined and cannot be called when the 'on

Crafting web design with media queries to ensure responsiveness

Tips for ensuring that npm only creates one instance of a dependency when it is being used by multiple projects

What's preventing my code from running the CSS class properly?

Bootstrap4 lacks responsiveness

Exploring Vue Routing with Regular Expressions