Tinymce Blur/Focus Event

Question

I try to catch the Blur and Focus Events of a tinyMce Editor.

I found following way for this.

            ed.onInit.add(function(ed) {
                tinyMCE.execCommand('mceRepaint');

                var dom = ed.dom;
                var doc = ed.getDoc();

                if (o.onblurtopics) {
                    tinymce.dom.Event.add(doc, 'blur', function(e) {
                        alert("blur");
                    });
                }
                if (o.onfocustopics) {
                    tinymce.dom.Event.add(doc, 'focus', function(e) {
                        alert("focus");
                    });
                }

            });

This works fine, but only in Firefox. When I try this in current Chromium or IE8 it has no effect.

Does anyone has a suggestion?

Answer 1

Use

tinymce.dom.Event.add(s.content_editable ? ed.getBody() : (tinymce.isGecko ? ed.getDoc() : ed.getWin()), 'blur', function(e) {
    alert('blur');
}

Answer 2

Seems overly complicated to me, this should work:

        editor.onInit.add(function(editor) {
            tinymce.dom.Event.add(editor.getBody(), "focus", function(e) {
                parent.console.log('focus');
            });
        });

        editor.onInit.add(function(editor) {
            tinymce.dom.Event.add(editor.getBody(), "blur", function(e) {
                parent.console.log('blur');
            });
        });

Answer 3

You could use jQuery to take care of the blur/focus (jQuery then will take care of the browser dependent stuff).

Update: It works! Here is the tinymce fiddle: http://fiddle.tinymce.com/ageaab/1

And here is the code:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "bold italic",
    setup : function(ed) {
        ed.on('init', function()
        {
            $(ed.getBody()).on('blur', function(e) {
                console.log('blur');
            });
            $(ed.getBody()).on('focus', function(e) {
                console.log('focus');
            });
        });
    }

});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>