How does tinyMCE 4 work?

Question

JavaScript

There is a tinyMCE 4 editor:

$(function () {
    tinyMCE.init({
            selector:'#inputShortStory',
            plugins: 'image link',
    });
});

which clings to the textarea, which is in the form, the form is submitted using AJAXForm, and so, on the first submission, the following POST request occurs:

subject=тест&short_story=&full_story=&create=%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C

that is, the short_story field is empty, but if the same form is sent again, then everything is OK:

subject=тест&short_story=%3Cp%тест%3C%2Fp%3E&full_story=%3Cp%тест%3C%2Fp%3E&create=%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C

Why is this happening? How does tinyMCE 4 work? Perhaps after its initialization, you need to update the DOM?

Answer 1

The thing is, when you call tinyMCE on a textarea, you don't write in that field itself, it does a bunch of wrappers over it and you end up with an iframe in front of you. So when you write something in the editor, it does not automatically save the new value in the textarea, for this it has a special trigger triggerSave (). After calling it, you will always have up-to-date content in the field. Here is the call to the editor I used:

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

Now if you take the value from the textarea, it will be up to date:
var text = $('textarea).val();