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?

Please visit this link; i hope that will help you http://stackoverflow.com/questions/5593019/tinymce-blur-event/12800840 — Mudaser Ali, Oct 24 '12 at 06:36

score 10 · Answer 1 · edited Aug 31 '11 at 22:48

10

Use

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

edited Aug 31 '11 at 22:48

Fabio

18,856
9
82
114

answered Aug 31 '11 at 05:10

Rajesh Taneja

101
1
3

Just great this is working! Give this man an upvote!! Ty a lot – SG 86 Mar 20 '12 at 14:22
4

what is 's' here.. ?! – Rahul garg Jan 30 '14 at 11:49
1

Same question as Rahul: what is "s" supposed to be? – Tybs Sep 09 '15 at 14:20

score 5 · Answer 2 · edited Mar 25 '15 at 12:33

5

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

edited Mar 25 '15 at 12:33

Luke Madhanga

6,871
2
43
47

answered Dec 05 '12 at 16:31

Kristoffer

362
2
10

2 problems here. A) editor.getBody() doesn't work everywhere. B) console.log won't work since the log falls into the tinyMCE iframe. It appears to not work. – Parris Sep 26 '13 at 21:20

Thariama · Answer 3 · 2014-05-14T08:53:32.400

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>

I think the normal blur/focus function will not work with an tinymce instance. — Johannes, May 03 '11 at 06:24

Tinymce Blur/Focus Event

3 Answers3