TinyMCE, jQuery and Ajax forms

Replace textareas with CSS class “wysiwyg” being by TinyMCE editors.

// warning: has to be outside of jQuery's "document ready" block.
 tinyMCE.init({
	mode : "textareas",
	theme : "simple",
	editor_selector : "wysiwyg"
});

• When a textarea is replaced by TinyMCE, it's actually hidden and TinyMCE editor (an iframe) is displayed instead.
• However, it's this textarea's contents which is sent when the form is submitted. Consequently its contents has to be updated before the form submission.
• For a standard form submission , it's handled by TinyMCE . For an Ajax form submission, you have to do it manually, by calling (before the form is submitted):

tinyMCE.triggerSave();

With jQuery Form plugin, here's how to update the textareas before the form fields are serialized and sent via Ajax:

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

If you get this error with tinyMCE.triggerSave():

t.win.document has no properties

You're dynamically adding/removing textareas without dealing properly with their associated TinyMCE editors:

tinyMCE.init({
    mode : "none",
    theme : "simple"
});

// replace textareaId by the id of your textarea
tinyMCE.execCommand('mceAddControl', false, 'textareaId');

// replace textareaId by the id of your textarea
tinyMCE.execCommand('mceRemoveControl', false, 'textareaId');

• jQuery Mailing list: Form Plugin: binding events
• TinyMCE Forum - Fix AJAX/DOM problems (moving, or re-creating textareas)