Too many CKeditor fields in jquery tabs makes IE freeze.

IE seems to freeze or take a long time to render a page if there are more than 2 or 3 CKeditor textareas in the page. This problem is specific to IE as Firefox, Chrome and Safari do not seem to have this problem.

The basic reason for this is that IE gets stuck in instantiating the ckeditor javascript object; maybe something in the ckeditor script creates this problem.

We had this particular problem we used a JQuery tab plugin with about 8 or more tabs and each tab had a textarea field wrapped in a ckeditor object.

The final solution that was used is simple: Dont instantiate all the ckeditor objects at page load time. Instantiate for each textarea when required. In other words, let the ckeditor object get created at page load for the default tab. For all the other tabs, convert the textarea in the target tab into a ckeditor when the tab is clicked. This was a simple solution which stopped IE from freezing and also sped up the page load time.

The code snippets are given below. It is assumed that jquery libraries and the ckeditor scripts are included in the page.

The HTML part is given below. The fields are using PHP code to obtain values, but that part can be ignored. Note that the default Homepage tab is already set to class=ckeditor so it becomes a ckeditor object at page load. The other textareas are set to a dummy class called “xckeditor”:

	<tr valign="top">
				<td colspan="2"> 
					<div id="tabs">
					<ul>
						<li><a href="#tabs-1">Homepage</a></li>
						<li><a href="#tabs-2">About Us</a></li>
						<li><a href="#tabs-3">Privacy</a></li>
						<li><a href="#tabs-4">Terms</a></li>
						<li><a href="#tabs-5">Advertise</a></li>
						<li><a href="#tabs-6">Partner</a></li>
						<li><a href="#tabs-7">Competition</a></li>
						<li><a href="#tabs-8">Bookmark</a></li>
						<li><a href="#tabs-9">Daily Deals Newsletter</a></li>
						<li><a href="#tabs-10">FAQ</a></li>
					</ul>

					<div id="tabs-1">
						<div class="editor_adjust">
							<textarea name="txtHomepageContent" id="txtHomepageContent"  rows="10" cols="40" class="ckeditor"><?php echo($sitecountry->getValue("homepage_content"));?>

The javascript is given below. Note that there is no code to make a textarea into a plain textarea by removing the ckeditor class. This was not required since once a textarea was made into a ckeditor object it was not affecting the page speed:

jQuery(document).ready(function($) {
	$("#tabs").tabs({
		event: 'click'
	}),
	$( "#tabs" ).tabs({
	   select: function(event, ui) { 
		   var i = ui.index;

		   if (i == 1) {
			   $('#txtAboutUsContent').removeClass("xckeditor");
			   $('#txtAboutUsContent').ckeditor();
		   }		
		   else if (i == 2) {
			   $('#txtPrivacyContent').removeClass("xckeditor");
			   $('#txtPrivacyContent').ckeditor();
		   }		
		   else if (i == 3) {
			   $('#txtTermsContent').removeClass("xckeditor");
			   $('#txtTermsContent').ckeditor();
		   }		
		   else if (i == 4) {
			   $('#txtAdvertiseContent').removeClass("xckeditor");
			   $('#txtAdvertiseContent').ckeditor();
		   }		
		   else if (i == 5) {
			   $('#txtPartnerContent').removeClass("xckeditor");
			   $('#txtPartnerContent').ckeditor();
		   }		
		   else if (i == 6) {
			   $('#txtCompetitionContent').removeClass("xckeditor");
			   $('#txtCompetitionContent').ckeditor();
		   }		
		   else if (i == 7) {
			   $('#txtBookmarkContent').removeClass("xckeditor");
			   $('#txtBookmarkContent').ckeditor();
		   }		
		   else if (i == 8) {
			   $('#txtNewsletterContent').removeClass("xckeditor");
			   $('#txtNewsletterContent').ckeditor();
		   }		
		   else if (i == 9) {
			   $('#txtFaqContent').removeClass("xckeditor");
			   $('#txtFaqContent').ckeditor();
		   }		
	   }
	});	

});

A good enhancement would have been to place a check if a textarea was already assigned the ckeditor class before running the