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

Question

Hi there, 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

You can see here an example how to setup events handler for tinyMCE editor, and you can explore more examples which probably will useful for you. All you need is directly bind onkeyup event of editor.

Answer 2

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+"\nEvent: "+evt);
                //....
            }
        );
    },
    ...
});