jQuery and TinyMCE: textarea value doesn't submit

Question

Before submitting the form, call tinyMCE.triggerSave();

You can configure TinyMCE as follows to keep the values of hidden textareas in sync as changes are made via TinyMCE editors:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

The textarea elements will be kept up to date automatically and you won't need any extra steps before serializing forms etc.

This has been tested on TinyMCE 4.0

Demo running at: http://jsfiddle.net/9euk9/49/

Update: The code above has been updated based on DOOManiac's comment

From TinyMCE, jQuery and Ajax forms:

TinyMCE Form Submission

• 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();

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

That's because it's not a textarea any longer. It's replaced with an iframe (and whatnot), and the serialize function only gets data from form fields.

Add a hidden field to the form:

<input type="hidden" id="question_html" name="question_html" />

Before posting the form, get the data from the editor and put in the hidden field:

$('#question_html').val(tinyMCE.get('question_text').getContent());

(The editor would of course take care of this itself if you posted the form normally, but as you are scraping the form and sending the data yourself without using the form, the onsubmit event on the form is never triggered.)

When you run ajax on your form, you need to tell TinyMCE to update your textarea first:

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave(); 
// now grap the data
var form_data = form.serialize(); 

I used:

var save_and_add = function(){
    tinyMCE.triggerSave();
    $('.new_multi_text_block_item').submit();
};

This is all you need to do.

This will ensure that the content gets save when you lose focus of the textarea

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });