jquery - $(this).keyup() not responding when focused on tinyMCE

Question

I'm trying to fire a function when the "keyup" event happens. This works fine when I'm testing it on normal textarea's and input fields, however, when I use the same code on the tinyMCE editor, nothing happens. I suspect it is because the tinyMCE is running on java, and already has event listeners in place, however my java knowledge is an age away from being anywhere near adiquate to deal with this problem!

This is my code that works an all inputs on the page, apart from the tinyMCE editor:

<script type="text/javascript">
$(document).ready(function() {

    $(this).keyup(function(){

        // get the contents of the editor...
        var content = tinyMCE.get('demo_textarea');
        content = escape(content.getContent());
        content = content.replace("+", "%2B");
        content = content.replace("/", "%2F");

        // copy the contents of the editor into #box_2
        $('#box_2').html(content);

    });

}
</script>

What I am actually trying to achieve is something similar to the stack overflow editor, where your input is reflected in another box.

Thanks for reading and thanks in advance for any help I may get.

Regards, Tom

Answer 1

Check the Configuration/setup section, you can easily add events to the editor...

tinyMCE.init({
    mode : ...,
    ...,
    setup : function (ed) {
        ed.onKeyPress.add(
            function (ed, evt) {
                alert("Editor-ID: "+ed.id+"
Event: "+evt);
                //....
            }
        );
    },
    ...
});