TinyMCE (Tiny) is regarded as one of the best open source, HTML WYSIWYG editors of our time - it’s powerful, relatively easy for browsers to digest, and free to use. The frustrations of using Tiny arise when you attempt to submit your Tiny-enhanced form via Ajax. Because your Tiny textarea inputs are converted to a mess of divs, spans, iframes, etc, Mootools Ajax.Form class fails to recognize the textarea. Fear not, there’s an easy workaround.

The Workaround

Below is a simple Javascript function you can use to convert Tiny-enhanced textareas back into regular form textareas:

var fixTiny = function(properties) {
	var properties = properties || new Object();
	var instance = properties.instance || 'mce_editor_0';
	tinyMCE.execInstanceCommand(instance,'mceCleanup');
	tinyMCE.triggerSave(true,true);
	return true;
}

Using The Goods

Using the above Javascript function is easy. Let’s assume we’re submitting two TinyMCE-enhanced textareas named “excerpt” and “body”, in a form with the id “myForm”. Here’s how to submit the form:

(The form submit code is taken directly from this Mootools demos page. Please refer to that page for further Ajax.Form reference.)

$('myForm').addEvent('submit', function(e) {
	/**
	 * Prevent the submit event
	 */
	new Event(e).stop();

	fixTiny({instance:'excerpt'});
	fixTiny({instance:'body'});

	/**
	 * This empties the log and shows the spinning indicator
	 */
	var log = $('log_res').empty().addClass('ajax-loading');

	/**
	 * send takes care of encoding and returns the Ajax instance.
	 * onComplete removes the spinner from the log.
	 */
	this.send({
		update: log,
		onComplete: function() {
			log.removeClass('ajax-loading');
		}
	});
});

All of this code, including the fixTiny function should be placed within a domready event.

Simple, Right?

If I’ve missed anything, shout at me. You can also refer to the Mootools forums for further examples of using both TinyMCE and the Ajax.Form class.