[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-04-20
2
Medium Priority
?
677 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:brianmfalls
2 Comments
 
LVL 15

Accepted Solution

by:
SRigney earned 2000 total points
ID: 35449081
I like what you are doing.  

you need to put the div back in when destroying the cke window.
function close_cke() {
                  if (mdfyFrm) {
                        mdfyFrm.destroy();
                  }
// right here add the div back into the form to allow it to be created again.
            }
               

And since you will want the click to link to elements that you are adding back in to the form you want to switch from

$(".editable").click(function(mdfy) {

to

$(".editable").live('click', function(mdfy) {

you can read more about that here. http://api.jquery.com/live/
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 35449121
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!  :)
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 8 hours left to enroll

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question