I am trying to develop a plugin, that shows on the page/post edit page. What I need to do, is detect when the content area changes. Either in visual mode, or text more. I would like to use a keyup event. So as the user is typing, I can provide my results.

But with the tinymce editor, I can’t seem to properly detect changes in the content area. I was at one point able to detect changes if the page was loaded in text mode. But we need it to work in visual mode. When the keyup event occurs, I want to copy the entire contents of the body into a JS variable. Once I have that, I can go from there.

I can’t seem to figure out how to accomplish this without hacking core and tweaking the tinymce init() method. Which isn’t what I want to do.

Thank you.

Edit: Answer

Ok so I marked the proper answer. But I wanted to state that in my case, I needed to load this code in ‘text’ mode which mean that the included javascript file wasn’t loaded at all. So I loaded the js into a script tag into the plugin area on the page and worked great. I still had to do the plugin init stuff, but it is loading an empty js file unless theres a way around that. Here is what I have in my javascript:

jQuery(document).ready(function($) {
    // Create 'keyup_event' tinymce plugin
    tinymce.PluginManager.add('keyup_event', function(editor, url) {

        // Create keyup event
        editor.on('keyup', function(e) {
            do_stuff_here();
        });
    });

    $('#content').on('keyup', function(e) {
        do_stuff_here();
    });

    // This function allows the script to run from both locations (visual and text)
    function do_stuff_here(content) {

        // test if the editor is available
        if (tinymce && null == tinymce.activeEditor)
        {
            console.log('tinymce not loaded (text mode)');
            // exit if the editor is not ready yet
            //return
            var data = $('#content-textarea-clone').text();
        }
        else
        {
            // visual mode
            data = $(tinymce.activeEditor.getContent()).text();
        }

        // rest of my processing
    }
});

Doing it this way works like a charm.