Maximizing CKEditor within a jQuery UI dialog

Tags: CKEditor, jQuery, developer, maximize, dialog fix

Some of you may be having issues with the maximize option while running CKEditor within a jQuery dialog box. We noted several errors can occur when you have elements floating around the WYISWYG editor. We developed a very simple solution for this and thought we'd share it here to help the many others we encountered while researching the cause.

You'll need to initialize the editor (whether you do this dynamically or however else) and then immediately run the following:

 
  
// Add an event listener to beforeCommandExec
 
  
CKEDITOR.instances.FIELDID.on('beforeCommandExec',function(e){
 
  
// Maximize / Minimize command detected
 
  
if(e.data.name=='maximize'){
 
  
// on Minimize: show hidden sibling elements and unset (minimize) detection
 
  
if($('#cke_FIELDID').data('max')!=null){
 
  $.
each($('#cke_FIELDID').data('show'),function(i,v){$(v).show();});
 
  $(
'#cke_FIELDID').removeData('max');
 
  
// on Maximize: hide sibling elements (remember which so we return state properly) and set (minimize) detection
 
  
}else{
 
  var 
a_show=new Array();
 
  $(
'#cke_FIELDID').siblings().each(function(i){if($(this).css('display')!='none'){$(this).hide();a_show.push(this)}});
 
  $(
'#cke_FIELDID').data('show',a_show);$('#cke_FIELDID').data('max',true);
 
  }
 
  }});
  

Note that you need to change FIELDID to whatever value you initiated the CKEDITOR instance on. This seems like rather a simple fix, however, their API documentation made this very difficult to trace.

We, essentailly, parse the list of our editor's sibling elements, hiding & remembering those that are visible. We then set a flag for the editor (our systems can have several dozen open at any time) so that we know it's maximized. The API does not provide event listeners for any of these events (commands) and we did not want to have to hack the source. It also does not provide any means for detecting the minimize command - only maximize - hence the need to track it ourselves. Finally, when the editor is minimized, we parse the array of sibling elements we hid, showing only them, and we unset our detection flag. It's a simple solution to a common & irritating, unhandled bug.

You can further streamline this code, however this version was broken down considerably for your convenience. We highly recommend running the code through a javascript compressor and/or packer, either dynamically within your PHP (ASP.NET, etc) code or before the web site (page, etc) goes live. Even if your server is set to gzip your outgoing files/content (through a framework/custom output buffer or directly within the web server - Apache server administrators are wise to enable this), packing and compressing javascript is a must. We pre-compress all of our javascript, css and outgoing html; as well as any dynamically generated javascript internally, and then it is gzipped by our server before it is sent. On average we compress our files down 68%!

Leave a Comment

Web Developmenthttps://www.nyndesigns.com/img/default/article/home_page_img.jpgSome of you may be having issues with the maximize option while running CKEditor within a jQuery dialog box. We noted several errors can occur when you…Maximizing CKEditor within a jQuery UI dialogtrueWeb Design, Development, Programming and Hostingen