CODEWITHSUNDEEP
ckeditorckeditor5
Wiktor Walc
Wiktor Walc

Reputation: 5560

How to set the height of CKEditor 5 (Classic Editor)

In CKEditor 4 to change the editor height there was a configuration option: config.height.

How do I change the height of CKEditor 5? (the Classic Editor)

Upvotes: 112

Views: 156832

Answers (30)

Marc
Marc

Reputation: 5455

I wrote some scss overrides to force CKEditor 5 to take 100% of the available height of its parent container element without loosing auto scroll capability in the editor area.

This uses a trick i discovered that i call Flex Relative Absolution.

In a typical scenario, a flex is used to create a Heading and content combo where the content div has flex grow on it to consume the rest of the available space, this can't have scroll capability directly on it, but if you make it position:relative and have a child div position: absolute; top, left, bottom, right = 0 with overflow control then this inner container gives you scroll capability in a flex box setup.

Luckily, It just so happens that CKEditors div structure aligns with this trick, so we just need to force the necessary styling on to it.

.ck-editor {

  height: 100% !important;
  display: flex;
  flex-direction: column;

  .ck-editor__top {
    flex-shrink: 1;
  }

  .ck-editor__main {
    flex-grow: 1;
    position: relative;

    .ck-editor__editable, .ck-source-editing-area {
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }

  }

}

Now CKEditor will always consume the full natural 100% height of its parent container where you can easily control the outer constraints for each instance placement.

Upvotes: 2

Denys Pikulin
Denys Pikulin

Reputation: 1

For those who've been looking for a solution to dynamically adjust the height of CKEditor 5 and add resize capabilities, I'm excited to share a new plugin I've developed: https://github.com/pikulinpw/ckeditor5-resizableheight

Key Features:

  • Dynamically adjust the height of the CKEditor instance.
  • Option to resize the editor, providing a more flexible editing environment.
  • Set specific height options or allow the plugin to determine the height based on content.
  • Seamless integration with CKEditor 5.

It's now available on npm and easy to integrate with your existing CKEditor setup. Check out the README for installation and usage instructions.

Feedback, bug reports, and contributions are welcome. Let's make our CKEditor experience even better!

Upvotes: 0

Kshitiz Timsina
Kshitiz Timsina

Reputation: 1

please use this style for global

.ck-editor__editable_inline {
    min-height: 500px !important;
}

Upvotes: 0

adriancs
adriancs

Reputation: 1

In order to enable both rich text editor and source mode to have the same height, use the following CSS:

.ck-source-editing-area,
.ck-editor__editable {
    min-height: 500px;
}

.ck-editor__main {
    height: 500px;
    min-height: 500px;
    max-height: 500px;
    overflow-y: scroll;
    border: 1px solid #bbbbbb;
}

Upvotes: 0

Sanket Jagadale
Sanket Jagadale

Reputation: 9

In Case of react js
   <CKEditor
      toolbar = {
                 [
                     'heading',
                     'bold',
                     'Image'
                  ]
                }
      editor={ClassicEditor}
      data={this.state.description}//your state where you save data
      config={{ placeholder: "Enter description.." }}
      onChange={(event, editor) => {
                     const data = editor.getData();
                     this.setState({
                           description : data
                      })
               }}
      onReady={(editor)=>{
                  editor.editing.view.change((writer) => {
                  writer.setStyle(
                     //use max-height(for scroll) or min-height(static)
                     "min-height", 
                     "180px",
                     editor.editing.view.document.getRoot()
                  );
               });
               }}
   />

Upvotes: -1

Kartikay Dhingra
Kartikay Dhingra

Reputation: 13

.ck-editor__editable_inline {
    min-height: 400px;
}

This makes height change for every editor used across all components. So it doesn't work in my case.

Upvotes: 0

mkb
mkb

Reputation: 1155

Using plugin here I came up with this

let rows: number;
export class MinHeightPlugin {
    constructor(public editor) {
    }
    init = function () {
        this.editor.ui.view.editable.extendTemplate({
            attributes: {
                style: {
                    minHeight: (rows * 40) + 'px',
                }
            }
        });
    };
}
export const MinHeightPluginFactory = (rowss: number): typeof MinHeightPlugin => {
    rows = rowss;
    return MinHeightPlugin;
};

and the usage(4 rows each rows is considered 40px height):

 this.editor.builtinPlugins.push(MinHeightPluginFactory(4));

I couldn't manage to make rows variable local to MinHeightPlugin, does anyone know how to do it?

Upvotes: 0

Critic
Critic

Reputation: 31

If its in latest version of Angular say 12 or 12+. We can add below style to your components style file.

:host ::ng-deep .ck-editor__editable_inline { min-height: 300px; }

Upvotes: 3

ENU ENAN
ENU ENAN

Reputation: 147

In my case it worked for me Add a ck class and write style like below:

<style>
    .ck {
        height: 200px;
    }

</style>

Upvotes: 0

OLASEYO OLUMIDE
OLASEYO OLUMIDE

Reputation: 51

For this particular version https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js, the below code block worked for me. .cke_contents { height: 500px !important; } I guess the difference is just the fact that is it in plural.

Upvotes: 0

Rahul More
Rahul More

Reputation: 542

Add this to your global stylesheet, this will increase the size of the CKEditor :)

.ck-editor__editable_inline {
    min-height: 500px;
 }

Upvotes: 4

nockenny
nockenny

Reputation: 51

Use css:

.ck.ck-editor__main .ck-content {
    height: 239px;
}

Upvotes: 5

Jaskaran Singh
Jaskaran Singh

Reputation: 2568

In the case of ReactJS.

<CKEditor
    editor={ClassicEditor}
    data="<p>Hello from CKEditor 5!</p>"
    onInit={(editor) => {
        // You can store the "editor" and use when it is needed.
        // console.log("Editor is ready to use!", editor);
        editor.editing.view.change((writer) => {
        writer.setStyle(
            "height",
            "200px",
            editor.editing.view.document.getRoot()
        );
        });
    }}
/>

Upvotes: 44

Dario Urban
Dario Urban

Reputation: 11

I resolve this just adding in my layout page

<style>
       .ck-content{
           height: 250px;
       }
</style>

Hope i help someone :D

Upvotes: 0

Shivang Chaturvedi
Shivang Chaturvedi

Reputation: 119

Put this CSS in your global CSS file and the magic will happen. CkEditor is full of unsolved mysteries.

.ck-editor__editable_inline {
    min-height: 400px;
}

Upvotes: 2

Hasan Zahran
Hasan Zahran

Reputation: 1442

Simply you can add this to your CSS file

.ck-editor__editable {min-height: 150px;}

Upvotes: 2

Mudassir Kidwai
Mudassir Kidwai

Reputation: 57

This CSS Method works for me:

.ck-editor__editable {
    min-height: 400px;
}

Upvotes: 0

Abraham Covelo
Abraham Covelo

Reputation: 961

From CKEditor 5 version 22 the proposed programmatic solutions are not working. Here it is how I get the work done:

ClassicEditor.create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.ui.view.editable.element.style.height = '500px';
    } )
    .catch( error => {
        console.error( error );
    } );
.ck-editor__editable {min-height: 500px;}
<div>
  <textarea id="editor">Hi world!</textarea>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

Upvotes: 19

CodeUK
CodeUK

Reputation: 431

Building on @Jaskaran Singh React solution. I also needed to ensure it was 100% height to it's parent. I achieved this by assigning a ref called "modalComponent" and further adding this code:

editor.editing.view.change(writer => {

   let reactRefComponentHeight = this.modalComponent.current.offsetHeight
   let editorToolbarHeight = editor.ui.view.toolbar.element.offsetHeight
   let gapForgiveness = 5
   let maximizingHeight = reactRefComponentHeight - editorToolbarHeight - gapForgiveness

   writer.setStyle(
      'height',
      `${maximizingHeight}px`,
      editor.editing.view.document.getRoot()
   )
})

Upvotes: 0

Shubham gupta
Shubham gupta

Reputation: 203

Use max-height and min-height both. Beacuse max-height give scroll bar option after reached maximum mention height. Where min-height give static height to <textarea>.

.ck-editor__editable { max-height: 400px; min-height:400px;}

Upvotes: 1

Abdelsalam Shahlol
Abdelsalam Shahlol

Reputation: 1769

I tried to set the height and width on the config but it just didn't work on the classic Editor. I was able to change the height of the editor programmatically on Vue by doing this.

mounted() {
    const root = document.querySelector('#customer_notes');

    ClassicEditor.create(root, config).then(editor=>{
        // After mounting the application change the height
        editor.editing.view.change(writer=>{
            writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
        });
    });
}

Upvotes: 8

MOAZZAM RASOOL
MOAZZAM RASOOL

Reputation: 169

1.resource/assets/js/app.js
=================================
2.paste this code 
=================================

 require('./bootstrap');
//integrate
window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');



============================================
3.write on terminal
============================================
npm install --save @ckeditor/ckeditor5-build-classic
npm run watch

=======================================
4.in blade file
=======================================
<!DOCTYPE html>
<html lang="en">
  <title></title>

  <body>

    <form action="{{route('admin.category.store')}}" method="post" accept-charset="utf-8">
    @csrf
      <div class="form-group row">
    <div class="col-sm-12">
        <label  class="form-control-label">Description:</label>
        <textarea name="description" id="editor" class="form-control" row="10" cols="80"></textarea>
    </div>
  </div>
   </form>
<script>
$(function () {
  ClassicEditor
.create( document.querySelector( '#editor' ), {
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
        ]
    }
} )
.catch( error => {
    console.log( error );
} );
})

</script>


  </body>
</html>

click to show image here

Upvotes: 0

Daniele Cerioni
Daniele Cerioni

Reputation: 21

If you use jQuery and the CKEditor 5 has to be applied to a textarea, there is a "quick and dirty" solution.

The condition:

<textarea name='my-area' id='my_textarea_id'>

If you use jQuery the Editor call could be:

var $ref=$('#my_textarea_id');

ClassicEditor
    .create( $ref[0] ,{
        // your options
    } )
    .then( editor => {
        // Set custom height via jQuery by appending a scoped style
        $('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);

    } )
    .catch( error => {
        console.error( error );
    } );

In other words, after rendering, you can address the same element used to build the editor and append after a scoped style tag with containing the custom height.

$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);

If you like to use a function (or some class method) to do this, you need something like this:

var editorBuildTo = function(id,options){
  var options=options || {};
  //Height represents the full widget height including toolbar
  var h = options.height || 250; //Default height if not set
  var $ref = $('#'+id);
  
  h=(h>40?h-40:h);//Fix the editor height if the toolbar is simple

  ClassicEditor
    .create( $ref[0] ,{
        // your options
    } )
    .then( editor => {
        // Set custom height via jQuery
        $('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: '+h+'px !important;}</style>').insertAfter($ref);
    } )
    .catch( error => {
        console.error( error );
    } );
}

editorBuildTo('my_textarea_id',{
  height:175,
  // other options as you need
});

This works well for me

Upvotes: 0

Hamza Dastgir
Hamza Dastgir

Reputation: 165

Add this to your stylesheet: 

.ck-editor__editable {
    min-height: 200px !important;
}

Upvotes: 11

Bang Andre
Bang Andre

Reputation: 541

Just test it's work. Hoping help you

var editor_ = CKEDITOR.replace('content', {height: 250});

Upvotes: -2

MD. IBRAHIM KHALIL TANIM
MD. IBRAHIM KHALIL TANIM

Reputation: 817

Just add it to the style tag.

<style>
 .ck-editor__editable
 {
    min-height: 150px !important;
    max-height: 400px !important;
 }
</style>

Upvotes: 4

Travis Tidwell
Travis Tidwell

Reputation: 5690

If you wish to do this programatically, the best way to do it is to use a Plugin. You can easily do it as follows. The following works with CKEditor 5 version 12.x

function MinHeightPlugin(editor) {
  this.editor = editor;
}

MinHeightPlugin.prototype.init = function() {
  this.editor.ui.view.editable.extendTemplate({
    attributes: {
      style: {
        minHeight: '300px'
      }
    }
  });
};

ClassicEditor.builtinPlugins.push(MinHeightPlugin);
ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
      // console.log( editor );
    })
    .catch( error => {
      console.error( error );
    });

Or if you wish to add this to a custom build, you can use the following plugin.

class MinHeightPlugin extends Plugin {
    init() {
        const minHeight = this.editor.config.get('minHeight');
        if (minHeight) {
            this.editor.ui.view.editable.extendTemplate({
                attributes: {
                    style: {
                        minHeight: minHeight
                    }
                }
            });
        }
    }
}

This adds a new configuration to the CKEditor called "minHeight" that will set the editor minimum height which can be used like this.

ClassicEditor
    .create(document.querySelector( '#editor1' ), {
      minHeight: '300px'
    })
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

Upvotes: 13

Wiktor Walc
Wiktor Walc

Reputation: 5560

Answering my own question as it might help others.

CKEditor 5 no longer comes with a configuration setting to change its height. The height can be easily controlled with CSS.

There is one tricky thing though, if you use the Classic Editor:

<div id="editor1"></div>

ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

Then the Classic Editor will hide the original element (with id editor1) and render next to it. That's why changing height of #editor1 via CSS will not work.

The simplified HTML structure, after CKEditor 5 (the Classic Editor) renders, looks as follows:

<!-- This one gets hidden -->
<div id="editor1" style="display:none"></div> 
<div class="ck-reset ck-editor..." ...>
    <div ...>
        <!-- This is the editable element -->
        <div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true">
            ...
        </div>
    </div>
</div>

In reality the HTML is much more complex, because the whole CKEditor UI is rendered. However the most important element is the "editing area" (or "editing box") marked with a ck-editor__editable_inline class:

<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>

The "editing area" is the white rectangle where one can enter the text. So to style / change the height of the editing area, it is enough to target the editable element with CSS:

<style>
.ck-editor__editable_inline {
    min-height: 400px;
}
</style>

Upvotes: 181

Nikolay Bronskiy
Nikolay Bronskiy

Reputation: 945

Setting the height via a global stylesheet. Just add to your common .css file (like style.css):

.ck-editor__editable {
    min-height: 500px;
}

Upvotes: 55

daka83
daka83

Reputation: 229

editor.ui.view.editable.editableElement.style.height = '300px';

Upvotes: 16

Related Questions