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

An alternative implementation to the one posted by Dan Malcolm, for TinyMCE 3.x, would be as follows:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.onChange.add(function() {
            editor.save();
        });
    }
});

As well as working on 3.x, this version uses editor.save instead of tinymce.triggerSave, which means it only updates the current editor rather than all editors in the page.

Answer 2

@Dan Malcom,

I noticed that when you type something in one of the boxes, then press the "show text values" button, then if you click the "Undo" arrow, it just keeps the already displayed text, not the new text caused by the "Undo". I discovered it while trying to use your example to check that the texteditor had something in it.

In my example if I type something in it, then do "Undo" it removes the text in it, but the form still submits.

See example here:

enter code here

https://codepen.io/speedygonzales77/pen/bzMrqB

enter code here

Answer 3

user this script before posting data by using Ajax. This is javascript code before use please load tiny mce js file and user it.

tinymce.triggerSave();

$.ajax({ 
    type: 'post', 
    url: 'autoSaveReport.php', 
    data: $('form').serialize(), 
    success: function (result) { 
        var redirectURL = window.location.pathname; 
        var redirectURL1 = redirectURL+"?incid="+result; 
        window.location = window.location+"?incid="+result; 
    } 
});

Answer 4

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/

Answer 5

Use this instead of tinymce.triggerSave();

$('#' + 'your_editor_id').html( tinymce.get('your_editor_id').getContent() );