TinyMCE textarea and post form using ajax

Question

I m using tinyMCE for textareas and POSTing form through AJAX.

But when I m trying to save textarea value, it is taking old values on first click, but it takes updated values on second click.

I have tried using tinyMCE.triggerSave() but it didn't work.

I have also tried tinyMCE.get('myid').getContent(), still it takes old values.

My code is as follows.

    $(".submit").live("click", function () {
            tinyMCE.triggerSave();
            var f = $(this).parents("form");
            var action = f.attr("action");
            var serializedForm = f.serialize();
            //tinyMCE.triggerSave(); also tried putting here
            $.ajax({
                 type: 'POST',
                 url: action,
                 data: serializedForm,
                 async: false,
                 success: function (data, textStatus, request) {
                     $(".divform").html(data);
                 },
                 error: function (req, status, error) {
                     alert&("Error occurred!");
                 }
            });
    return false;
    });

Please help, any help would be appreciated

Answer 1

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 () {
            tinymce.triggerSave();
        });
    }
});

With this in place, you can access up-to-date values directly from the textarea elements at any time.

This has been tested on TinyMCE 4.0

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