CKEditor 3.0 Height

Question

Is there a way to set the height of CKEditor 3.0 to a percentage, such as 100%, such that it takes up the whole window?

I am currently using absolute values, but they do not blend well with my UI :(

CKEDITOR.replace('editor1',{
    height: '600px'
});

Answer 1

First add a function for resizing your edtior:

function resizeEditor() {

  var defaultHeight = 300;
  var newHeight = window.innerHeight-150; 
  var height = defaultHeight > newHeight ? defaultHeight: newHeight;

  CKEDITOR.instances.editor1.resize('100%',height);
}

Note: 150 works for me, maybe change the value from 150 to more or less.

Call this from the window onresize Event:

window.onresize = function() {
  resizeEditor();
}

and add the first call to the constructor of your editor:

CKEDITOR.replace('editor1',
  {  
    on:
    {
      instanceReady: function(ev)
      {
        setTimeout(resizeEditor, 500);
      }
    }
  });

Answer 2

After a lot of fiddling with this resizing stuff on ckeditor 4 I made up this which works perfectly perfectly for me:

in config.js:

// prevent flashing of resizing by setting the content panel to zero height before it is resized
config.height = '0px';
config.width = '100%'; 

jQuery:

$(document).ready(function(){

    // resize the editor(s) while the instance is ready
    CKEDITOR.on('instanceReady', function() { 
        var textEditHeight      = $(".textPanel").height();
        var ckTopHeight         = $("#cke_1_top").height();
        var ckContentsHeight    = $("#cke_1_contents").height();

        for (var i = 1; i < 10; i++) {
            $("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");

        }
    });

    // resize the editor(s) while resizing the browser
    $(window).resize(function(){
        var textEditHeight      = $(".textPanel").height();
        var ckTopHeight         = $("#cke_1_top").height();
        var ckContentsHeight    = $("#cke_1_contents").height();

        for (var i = 1; i < 10; i++) {
            $("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");
        }
    });

});

I have multiple instances of the editor of the exact same size in tabs, for every language one, hence the for loop. If you have one editor you can leave that line away and use the standard id cke_1_contents.

In this example the heights are taken from the first editors toolbar (cke_1_top) and contentpanel (cke_1_contents). The .textPanel height is the surrounding div were the editor should fit in. I added 10px because I needed that for my layout.

I think it can be a littlebit more efficiënt (it initiates the resizing as many times as there are editors) but for now it is finally working flawlessly in all my recent browsers (ff, ie, chrome and safari).