asked on

How do I close an instance of ckeditor which replaces a div?

The script below replaces my div's (class="editable") with ckeditor when they are clicked. If one is open and another clicked, the already opened editor closes and a new editor opens. I added a border to my form that when passed, calls 'close_cke()'. It works great, but once it is called, I can no longer click to open the forms on the 'editable' div's. Essentially, what I need is for any open ckeditor windows within the form to return to their original state (<div>) when the user 'mouses' out of the form. Further, once 'moused' out, the user should be able to mouse back in and call up the ckeditor instances by clicking on the respective div. I hope that makes sense. I've yet to get my coffee... :)

	<script type="text/javascript">
		
		var mdfyFrm;
		
		function close_cke() {
			if (mdfyFrm) {
				mdfyFrm.destroy();
			}
		}
		
		$(".editable").click(function(mdfy) {
			var element = mdfy.target || mdfy.srcElement;
		
			element = element.parentNode;
		
			if (element.nodeName.toLowerCase() == 'div'
				 && (element.className.indexOf('editable') != -1 ))
				replaceDiv(element);
		});
		
		function replaceDiv(element) {
			if (mdfyFrm) {
				mdfyFrm.destroy();
			}
			mdfyFrm = CKEDITOR.replace(element);
		}
	
		//]]>
	</script>

Open in new window

ASKER CERTIFIED SOLUTION

SRigney

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brianmfalls

ASKER

That may work, but.... I solved this late yesterday. :)

<script type="text/javascript">
	//<![CDATA[

	var mdfyFrm;

	$('.editable').click(function(mdfy) {
		var element = mdfy.target || mdfy.srcElement;
	
		element = element.parentNode;
	
		if (element.nodeName.toLowerCase() == 'div'
			 && (element.className.indexOf('editable') != -1 ))
			replaceDiv(element);
	});
	
	// sub function for $('.editable').click(function(mdfy) {...));
	function replaceDiv(element) {
		if (mdfyFrm) {
			mdfyFrm.destroy();
		}
		mdfyFrm = CKEDITOR.replace(element);
	}
	
	function removeEditor()
	{
		if (!mdfyFrm)
			return;
	
		// Retrieve the editor contents. In an Ajax application, this data would be
		// sent to the server or used in any other way.
		$('.editable').innerHTML = mdfyFrm.getData();
	
		// Destroy the editor.
		mdfyFrm.destroy();
		mdfyFrm = null;
	}

	//]]>
</script>

Open in new window

However, since you answered, enjoy the points! :)