javascript - TinyMCE undo action does not fire change event - Stack Overflow

admin管理员组

文章数量:1345132

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!

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!

• javascript
• html
• tinymce

Share Improve this question Follow asked Sep 8, 2014 at 20:19 AntonAnton 17233 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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);
    });
}

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');

本文标签： javascriptTinyMCE undo action does not fire change eventStack Overflow