TinyMCE undo action does not fire change event

Question

Not sure if anyone has ever experienced this issue with your TinyMCE. I have a on change event handler which changes a value of another element. See the init code below:

/** Initialize TinyMCE inline editor for headline text */
tinymce.init({
    selector: ".editable.headline",
    paste_as_text: true,
    inline: true,
    toolbar: "undo redo",
    menubar: false,
    verify_html: false,
    font_formats: "MuseoSans = sans-serif;",
    setup: function(ed) {
        var text = '';
        var wordlimit = 200;
        /** handler for keydown event to prevent < 200 character limit */
        ed.on('keydown',function(e) {
            text = ed.getContent().replace(/(< ([^>]+)<)/g, '');
            wordcount = wordlimit - (text.length);
               if(wordcount <= 0 && e.keyCode != 8) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
               }
        });
        /** handler for headline text changes */
        ed.on('change',function(e) {
            var content = tinyMCE.get(ed.id).getContent();
            var escapedClassName = ed.id.replace(/(\[|\])/g, '\\$&');
            $('.'+escapedClassName).html(content);

        });
   }
});

When I type/paste text the change event fire properly, however when I undo the text changes the change event does not fire properly.

Any ideas how I can force fire the change event on undo and redo events?

Any help would be greatly appreciated!

Answer 1

The content is not super easy to find, but the TinyMCE website does describe a list of events that are fired during the course of the editor's lifecycle and explains when those events are fired.

In your scenario, simply add the redo and undo events to the on function call you have within the setup function.

setup: function (ed) {
    ed.on('change redo undo',function(e) {
        var content = tinyMCE.get(ed.id).getContent();
        var escapedClassName = ed.id.replace(/(\[|\])/g, '\\$&');
        $('.'+escapedClassName).html(content);
    });
}

Answer 2

Just FYI, I had the same issue when changing the URL of a link (it was not triggering any events) and I solved by just firing the event manually:

 tinymce.activeEditor.fire('change');