ckeditor fails to load when accessed within jQuery tabs

My tabs content is being called via ajax.  I think the problem is that the instance of the ckeditor is created once and it doesn't understand what to do the second, third, etc. time through.  How do I change the ckeditor initilization instance so that it will kill the old and create a new one every time the content is called via ajax into the tab?  Is there a 'catch all' that I can use to kill any and all instances of ckeditor any time a new tab is selected?  Thanks.

Below is the template that is called into the tab via ajax:
<cfset services = application.prodServ.getServices()>
<cfset serviceContent = valueList(services.prodServ_html, '|')>
<cfset serviceTitle = valueList(services.prodServ_title, '|')>


	<br class="pullUp" />
	<cfajaxproxy cfc="" jsclassname="jsobj" />
	<script type="text/javascript">

		<!---init function--->
		$(function() {
			var config = {};
		<!---save content function--->
		function saveContent() {
			var index = document.selectService.service.value;
			var content = $( 'textarea.contentEditor' ).val();
			var dsn = '#application.dsn#';
			var cfcAsAjax = new jsobj();
			return false;
		<!---update editor funciton--->
		function updateEditor() {
			var cntntIndx = $('##contentIndex').val();
//			if (cntntIndx != 0) {
//				saveContent();
//			}
			var slctdIndx = document.selectService.service.selectedIndex - 2;
			var cntntTtl = '#jsStringFormat(serviceTitle)#'.split('|');
			var cntntTtl = cntntTtl[slctdIndx];
			var slctdCntnt = '#jsStringFormat(serviceContent)#'.split('|');
			var slctdCntnt = slctdCntnt[slctdIndx];
			$( 'textarea.contentEditor' ).val(slctdCntnt);
	<!---<textarea class="contentEditorX"></textarea>--->

	<div class="sevenSeventySeven">
		<form name="selectService">
			<select name="service" onchange="updateEditor();">
				<option value="">Choose Category to Edit</option>
				<option value=""></option>
				<cfset loopCount = 0>
				<cfloop query="services">
					<cfset loopcount = incrementValue(loopcount)>
					<option value="#services['prodServ_id'][loopcount]#">#services['prodServ_title'][loopcount]#</option>

	<div class="sevenSeventySeven roundShadow" style=" margin-top: 28px;">
		<input id="contentIndex" type="hidden" name="index" value="" />
		<input id="contentTitle" type="text" name="index" value="" readonly="readonly" class="blueTxt" style=" border: none; font-weight: bold; font-size: 12px; " />
		<input type="submit" value="Save Changes" class="saveChanges" onclick="saveContent();" />
		<textarea cols="80" id="contentEditor" class="contentEditor" rows="10"></textarea>

Open in new window

Who is Participating?
brianmfallsAuthor Commented:
Place the following code before the ckeditor init configuration and you are golden!

var o=CKEDITOR.instances['contentEditor'];
if (o) o.destroy();

Open in new window

brianmfallsAuthor Commented:
Problem solved.  No other solutions offered.  :)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.