Jun 24

TinyMCE AJAX Form Submission

AJAX, JavaScript

The documentation wiki on TinyMCE provides a great tutorial on how to turn TinyMCE into a standalone AJAX editor.  But what it doesn’t have is a great tutorial on how to update the contents of TinyMCE into the original <textarea> form element for more passive AJAX saving.

I recently came across a situation where I needed to save an entire form with an AJAX call in an automated fashion that would get the values of all the different form elements dynamically and save them to the specified URL in the <form> element’s “action” attribute.  Great! I thought - I’ll just use the jQuery Form plugin and that will do the trick.  After looking at the saved result, it was apparent that something was amiss.  The new content I entered in the instance of TinyMCE on the page was not getting updated, although everything else was!  I even inspected the raw POST request sent via AJAX from the web browser with the wonderful Firebug Firefox extension, and the new TinyMCE data wasn’t even being sent with the request.

The Manual Solution

After a quick search on the internet, I saw that most people were solving the problem by binding a custom function to the submit button with TinyMCE’s triggerSave() function that would update the contents of the active TinyMCE editor and save the contents back to the original <textarea> form element just before sending the form data to the server.  The problem with that for me was that I was building this functionality for a content management system (CMS), and I needed a more automated solution that would work whether or not TinyMCE was even loaded on the page.  Additionally, I dreaded the prospect of having to add the same JavaScript code to every form that uses TinyMCE in the whole CMS.

The Automated Solution

So after discovering the triggerSave() function, the question was how to fire the triggerSave() function automatically after any content inside TinyMCE is updated or changed.  The answer lies in the available but slightly obscure TinyMCE.Editor Events.  I was initially looking for some sort of an ‘onBlur’ event so the content would be saved when the TinyMCE editor loses focus (which will happen when the user clicks on the submit button), but there is no such event listed in the documentation.  The next best thing is to use the ‘onChange’ event, which is a little deceptive on the chosen name.  Unlike regular form elements, the onChange TinyMCE event does not actually fire after each and every little change in the TinyMCE editor instance, but instead ironically behaves much more like the onBlur event I was originally looking for, because it only fires when the user clicks somewhere outside the TinyMCE editor box.  So using the sample code on the onChnage event documentation page as a guide, I was able to craft my own onChange event that will save the editor contents back to the original <textarea> element after any content change:

tinyMCE.init({
	// ...			
	setup : function(ed) {
		ed.onChange.add(function(ed) {
			tinyMCE.triggerSave();
		});
	}
});

So putting it all together in a real TinyMCE init() function call, it looks something like this:

tinyMCE.init({
	mode : "exact",
	elements : "body",
	theme : "advanced",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
 
	setup : function(ed) {
		ed.onChange.add(function(ed) {
			tinyMCE.triggerSave();
		});
	}
});