CKEditor Dynamic Resize


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



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.