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.

score 17 · Answer 1 · answered Jun 04 '14 at 03:00

17

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

answered Jun 04 '14 at 03:00

ptguy

426
3
6

Thariama · Answer 2 · 2011-04-08T13:09:41.577

11

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
...

edited Apr 08 '11 at 13:09

answered Apr 08 '11 at 11:52

Thariama

50,002
13
138
166

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. – T1000 Apr 08 '11 at 12:24
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 – Thariama Apr 08 '11 at 13:06
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 ? – T1000 Apr 08 '11 at 13:35
no, don't do it editing tinymce_init.js, have a look here (http://tinymce.moxiecode.com/wiki.php/%22For_Dummies%22) on howto initialize tinymce (especially the part with tinymce.init) – Thariama Apr 08 '11 at 14:07
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 ----> http://jsfiddle.net/FUCKy/3/ – T1000 Apr 08 '11 at 14:23
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) – Thariama Apr 08 '11 at 16:59
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. – T1000 Apr 08 '11 at 19:06
my solution works for FF only - sry (if i find another more applicable solution i will let you know) – Thariama Apr 12 '11 at 09:26
5

`getDoc()` does not work in Chrome (document won't issue the blur event there), `getWin()` works fine for me. – Pavel Koryagin Mar 28 '12 at 12:40
5

Is nobody seriously going to mention the comedic value in the auto generated token by JSFiddle? – Kyle Dec 17 '13 at 20:12

score 1 · Answer 3 · answered Oct 09 '12 at 13:12

1

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;

answered Oct 09 '12 at 13:12

Mudaser Ali

3,989
3
25
27

1

Yes, but it's called even on copy/paste and any other command like bold etc. Not an option. :) – Somebody Oct 20 '12 at 08:43
I use that function to determine when the editor is initialized, and then call `tinymce.dom.Event.add(tinyMCE.getInstanceById('editor-id').getWin(), 'blur', function(){ //do whatever});` – arod Jan 22 '16 at 06:02

FrancescoMM · Answer 4 · 2013-06-28T09:46:22.367

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

        });
    },

    // ....

}

I tried something along these lines, (just the blur part) and it seemed to work everywhere except Safari on iPad. — ChrisFox, Jan 09 '16 at 18:30

Calum · Answer 5 · 2011-04-08T10:59:20.407

0

Edit:

$('#id_topic_text_parent textarea').live('blur', function() {
   alert('asd');
});

Can you post the html for the #id_topic_text_parent span?

~~$('#id_topic_text_parent').find('textarea').blur(function(){ alert('asd'); });~~

edited Apr 08 '11 at 10:59

answered Apr 08 '11 at 10:29

Calum

5,308
1
22
27

#id_topic_text_parent is created by tinyMCE after the page is loaded so nope this is not working. – T1000 Apr 08 '11 at 10:44
isn't there a function when you call tinyMCE that fires once tinyMCE has loaded? you could put this in there. – Calum Apr 08 '11 at 10:55
added live() function which will account for newly created elements – Calum Apr 08 '11 at 10:59

score 0 · Answer 6 · answered Nov 21 '19 at 13:07

Let's say you have textarea:

<textarea id="mytext">

And you initialized TinyMCE editor:

tinymce.init({
    selector: '#mytext',
    // ...
});

You can bind "onblur" event using such code:

tinyMCE.get('mytext').on('blur', function(e) {
    console.log(this); // "this" contains tinymce.Editor object
});

Reference and details: https://www.tiny.cloud/docs/api/tinymce/tinymce.focusevent/

score 0 · Answer 7 · answered Aug 22 '23 at 06:14

If unable to do this on init, you can do this any time afterwards by simply selecting the editor by the textarea id then add the blur event.

If your textarea id is for example 'editor_2', ie

<textarea id="editor_2"></textarea>

and your javascript init code is similar to as follows,

tinyMCE.init({selector: '#editor_2'});

Then you can put this anywhere afterwards in JS:

tinyMCE.get('editor_2').on('blur', e => console.log("editor_2 blur event", e));

Tested OK on v4.

tinyMCE blur event

7 Answers7

Linked