I have the CKEditor on a page. Whenever the users changes the height by dragging the editor, I want to know the new height, so I can save it.

Using CKEDITOR.config.height I can get the configured height, but I want the current height.

I have also tried using height() from jQuery, but that only gives me the height set via CSS - and if no height set, it gives me "43".

I would like to either

• Get the current height of the CKEditor textarea (minus menus, but I can do that calculation myself)
• Have CKEditor trigger something whenever the height changes

The reason is, that I want to save this information along with the content, in order to size the iframe it will be shown in correctly.

I have the CKEditor on a page. Whenever the users changes the height by dragging the editor, I want to know the new height, so I can save it.

Using CKEDITOR.config.height I can get the configured height, but I want the current height.

I have also tried using height() from jQuery, but that only gives me the height set via CSS - and if no height set, it gives me "43".

I would like to either

• Get the current height of the CKEditor textarea (minus menus, but I can do that calculation myself)
• Have CKEditor trigger something whenever the height changes

The reason is, that I want to save this information along with the content, in order to size the iframe it will be shown in correctly.

• javascript
• ckeditor

3 Answers 3

1. To get current height you can use:

   editor.ui.space( 'contents' ).getStyle( 'height' ); // e.g. 200px
   

   This finds UI space named contents, which is an element in which editable iframe is placed. When you set editor's height by editor#resize() method this size is set directly on contents UI space.

2. You can listen on editor#resize event to execute some code when editor's size has been changed:

   editor.on( 'resize', function() {
       console.log( 'resized...' );
   } );
   

PS. This answer is valid for CKEditor 4.0. It may not work on CKEditor 3.6.x

In case of looking for the height of the whole "classic" CKEditor (with toolbar) try:

editor.container.$.clientHeight;

where editor points to a CKEditor instance.

This code use JQuery to get height of document's body in a "classic editor" (with toolbar). 'editor' is a instance of CKEDITOR:

CKEDITOR.on( 'instanceReady', function( evt )
  {
    var editor = evt.editor;

   editor.on('change', function (e) { 
    var contentSpace = editor.ui.space('contents');
    var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
    var ckeditorFrame = ckeditorFrameCollection[0];
    var innerDoc = ckeditorFrame.contentDocument;
    var innerDocTextAreaHeight = $(innerDoc.body).height();
    console.log(innerDocTextAreaHeight);
    });
 });

https://codepen.io/edsonperotoni/pen/OJJZzZq

References:

https://github./ckeditor/ckeditor4/blob/af6f5152347bcecd5feb6a89a5b7882cc99292a3/plugins/wysiwygarea/plugin.js

https://ckeditor./old/forums/CKEditor/Get-height-of-content-in-the-Ckeditor