tinyMCE blur event

Question

Hello I want to do some stuff when user finished writing in the tinyMCE textarea and click somewhere outside (onBlur). So far I haver try:

$('#id_topic_text_parent').live('blur',function(){
    alert('asd')
//I saw #id_topic_text_parent in firebug, it is span containing the tiny mce
});

also

$('#id_topic_title').blur(*and*)live('blur...
tinyMCE.activeEditor.blur(*and*)live('blur...

But it wont work.
Can you assist me.

Solution 1

according to http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.blur

This works for me

setup : function(ed) {
    ed.on('blur', function(e) {
        alert('blur');
    });
},

Solution 2

You can use this approach to solve your issue. When initializing tinymce set the setup paramter to the following (inside tinyMCE.init({...})

...
theme: "advanced",   // example param
plugins = 'code',    // example param
setup : function(ed) {
    ed.onInit.add(function(ed, evt) {

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

        tinymce.dom.Event.add(doc, 'blur', function(e) {
            // Do something when the editor window is blured.
            alert('blur!!!');
        });
    });
},
cleanup: true,      // example param
...

Solution 3

Please use

function myCustomOnChangeHandler(inst) {
        alert("Some one modified something");
        alert("The HTML is now:" + inst.getBody().innerHTML);
}

tinyMCE.init({
        ...
        onchange_callback : "myCustomOnChangeHandler"
});

Ref: http://www.tinymce.com/wiki.php/Configuration:onchange_callback

This function is called once the user "blurs" the area;

Solution 4

I used this to close the external toolbar on blur, it seems to work (tested only on FF at the moment)

function showHideBar(sho,aid) { // aid=id not used
    if(sho) {
        $( ".mceToolbar,.mceExternalClose" ).show();
    } else {
        $( ".mceToolbar,.mceExternalClose" ).hide();
    }
}

tinyMCE.init({

    // ....

    theme_advanced_toolbar_location: "external",
    resize : true,
    setup : function(ed) {
        ed.onInit.add(function(ed, event) {
            $(ed.getBody()).blur(function() {
                // alert("blur");
                showHideBar(false,ed.id);
            });

            $(ed.getBody()).focus(function() {
                // alert("focus");
                showHideBar(true,ed.id);
            });

        });
    },

    // ....

}

View more solutions

Comments

[T1000]

#id_topic_text_parent is created by tinyMCE after the page is loaded so nope this is not working.

[Calum]

isn't there a function when you call tinyMCE that fires once tinyMCE has loaded? you could put this in there.

[Calum]

added live() function which will account for newly created elements

[T1000]

Is it correct to paste your code into tiny_mce_init.js ? Because I do that and it is not working, there are no errors too.

[Thariama]

no it is not, but i wasn't talking about modifying it! i edited my post to show you that setup is a parameter you set when initializing tinymce

[T1000]

Ok, that is what I did with tinymce_init.js, but it is not triggering the alert popup when blurring tinyMCE editor... is there something else that I must do ?

[Thariama]

no, don't do it editing tinymce_init.js, have a look here (tinymce.moxiecode.com/wiki.php/%22For_Dummies%22) on howto initialize tinymce (especially the part with tinymce.init)

[T1000]

Thariama tinymce_init.js is the very same file from howto you gave me. You can see part of my code here, please take a look ----> jsfiddle.net/FUCKy/3

[Thariama]

sorry, my fault (i somehow thoguht you were editing the source files) , you are right. this is a legal way to do it. can you tell me what browser you use to test it? (i am using FF 3.6 and it works)

[T1000]

I'm developing on Chrome at the moment... so far I have not test it on other browesers, but I'm looking for complex solusion.

[Thariama]

my solution works for FF only - sry (if i find another more applicable solution i will let you know)

[Pavel Koryagin]

getDoc() does not work in Chrome (document won't issue the blur event there), getWin() works fine for me.

[Somebody]

Yes, but it's called even on copy/paste and any other command like bold etc. Not an option. :)

[Kyle]

Is nobody seriously going to mention the comedic value in the auto generated token by JSFiddle?

[ChrisFox]

I tried something along these lines, (just the blur part) and it seemed to work everywhere except Safari on iPad.

[arod]

I use that function to determine when the editor is initialized, and then call tinymce.dom.Event.add(tinyMCE.getInstanceById('editor-id').g‌​etWin(), 'blur', function(){ //do whatever});