Advanced Search

CKEditor Dynamic Resize

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- ckeditor/config.js -->
  2. function e(id){
  3.  return document.getElementById(id)
  4. } 
  5.  
  6. function getWindowHeight() {
  7.  var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;
  8.  return elem.clientHeight;
  9. }
  10.  
  11. function calculateOffsetTop(element, opt_top) {
  12.  var top = opt_top || null;
  13.  var offset = 0;
  14.  for(var elem = element; elem && elem != opt_top; elem = elem.offsetParent) {
  15.   offset += elem.offsetTop;
  16.  }
  17.  
  18.  return offset;
  19. }
  20.  
  21. function dynamicEditorHeight() {
  22.  var window_h = getWindowHeight();
  23.  var resizer_height = window_h - calculateOffsetTop(e(document.forms[0].id));
  24.  var title_field_h = e("content_title").offsetHeight || 20;
  25.  var toolbar_h = 62; // double line toolbar
  26.  var btm_grab_div_h = 21;
  27.  var submit_btn_h = (document.forms[0].commit) ? document.forms[0].commit.offsetHeight : 0;
  28.  var padding_h = 60;
  29.  resizer_height -= (title_field_h + toolbar_h + btm_grab_div_h + submit_btn_h + padding_h + 50); // extra buffer to avoid window scrollbar
  30.  return(resizer_height);
  31. }
  32.  
  33. CKEDITOR.editorConfig = function( config ) { 
  34.  config.height = dynamicEditorHeight();
  35. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.