FreeMan FreeMan - 3 months ago 36
HTML Question

TinyMCE undo action does not fire change event

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

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 life cycle (look under the Events heading) 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);
    });
}