2010/12/08

Setting 100% height in CKEditor

In CKEditor the config.height setting doesn't allow  to use percentages, only fixed sizes are supported, but that is not good when you try to provide a dialog that is just the editor without any extra stuff (like in this Write Area pane).

The available option is to use the maximize plugin and execute it using the instanceReady event; that has some little problems:

  • You have to keep the maximize plugin into the code, although you want to execute it just once.
  • If you try to remove the maximize button from the toolbar, you'll get an error.
  • There's a flicker while the editor is first created and then resized.

The way to avoid those problems is to adjust the CSS in your main page, these are the rules that I've included in Write Area to get 100% without the previous problems (keep in mind that I've tested only in Firefox, at the very least you'll have to provide the "cke_browser_gecko" rule also for other browsers (ie, webkit, opera) and test if there are other problems.

span.cke_skin_kama, span.cke_skin_office2003, span.cke_skin_v2 {
 padding:0  !important;
 border:0  !important;
 -moz-border-radius:0  !important; 
 height:100%;
}

span.cke_browser_gecko {
 height:100% !important;
 display:block;
}

.cke_skin_kama .cke_editor, .cke_skin_office2003 .cke_editor, .cke_skin_v2 .cke_editor,
.cke_skin_office2003 .cke_wrapper, .cke_skin_v2 .cke_wrapper {
 height:100%;
}

.cke_skin_kama .cke_wrapper {
 padding:0 !important;
 height:100%;
}

 

2 comments:

Sagarika said...

I tried it but unfortunately a lot of blue space is filling up the top and bottom portions of the editor .Though maximize flicker is gone but I can't use it yet .

Alfonso said...

Use Firebug to check what's wrong with your page.
I used that configuration for WriteArea and it worked correctly (there isn't anything extra in the page and it's adjusted only for Firefox 3.6)