Get the height of ckeditor element

1
votes

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.

3
javascriptckeditor

3 Answers

4
votes

  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

4
votes

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.

0
votes

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.com/ckeditor/ckeditor4/blob/af6f5152347bcecd5feb6a89a5b7882cc99292a3/plugins/wysiwygarea/plugin.js

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