TinyMCE 3 - textarea id which fired blur event

Question

When a TinyMCE editor blur occurs, I am trying to find the element id (or name) of the textarea which fired the blur event. I also want the element id (or name) of the element which gains the focus, but that part should be similar.

I'm getting closer in being able to get the iframe id of the tinymce editor, but I've only got it working in Chrome and I'm sure there is a better way of doing it. I need this to work across different browsers and devices.

For example, this below code returns the iframe id in Chrome which is okay since the iframe id only appends a suffix of "_ifr" to my textarea element id. I would prefer the element id of the textarea, but it's okay if I need to remove the iframe suffix.

EDIT: I think it's more clear if I add a complete TinyMCE Fiddle (instead of the code below): http://fiddle.tinymce.com/HIeaab/1

setup : function(ed) {
 ed.onInit.add(function(ed) {
  ed.pasteAsPlainText = true;
/* BEGIN: Added this to handle JS blur event */
/* example modified from: http://tehhosh.blogspot.com/2012/06/setting-focus-and-blur-event-for.html */
  var dom = ed.dom,
  doc = ed.getDoc(),
  el = doc.content_editable ? ed.getBody() : (tinymce.isGecko ? doc : ed.getWin());
  tinymce.dom.Event.add(el, 'blur', function(e) {
   //console.log('blur');

   var event = e || window.event;
   var target = event.target || event.srcElement;
   console.log(event);
   console.log(target);
   console.log(target.frameElement.id);
   console.log('the above outputs the following iframe id which triggered the blur (but only in Chrome): ' + 'idPrimeraVista_ifr');
  
  })
  tinymce.dom.Event.add(el, 'focus', function(e) {
   //console.log('focus');
  })
/* END: Added this to handle JS blur event */
 });
}

Maybe it's better to give a background of what I'm trying to accomplish: We have multiple textareas on a form which we're trying to "grammarcheck" with software called "languagetool" (that uses TinyMCE version 3.5.6). Upon losing focus on a textarea, we would like to invoke the grammarcheck for the textarea that lost focus and then return the focus to where it's supposed to go after the grammar check.

I've struggled with this for quite some time, and would greatly appreciate any feedback (even if it's general advice for doing this differently).

Many Thanks!

So... did you find a solution? – gfullam Jun 10 '15 at 06:05 — gfullam, Jun 10 '15 at 06:05

gfullam · Accepted Answer · 2015-05-26T04:17:41.947

Simplify

TinyMCE provides a property on the Editor object for getting the editor instance ID: Editor.id

It also seems overkill to check for doc.content_editable and tinyMCE.isGecko because Editor.getBody() allows for cross-browser compatible event binding already (I checked IE8-11, and latest versions of Firefox and Chrome).

Note: I actually found that the logic was failing to properly assign ed.getBody() to el in Internet Explorer, so it wasn't achieving the cross-browser functionality you need anyway.

Try the following simplified event bindings:

tinyMCE.init({
    mode : "textareas",
    setup : function (ed) {
        ed.onInit.add(function (ed) {

            /* onBlur */
            tinymce.dom.Event.add(ed.getBody(), 'blur', function (e) {
                console.log('Editor with ID "' + ed.id + '" has blur.');    
            });

            /* onFocus */
            tinymce.dom.Event.add(ed.getBody(), 'focus', function (e) {
                console.log('Editor with ID "' + ed.id + '" has focus.');   
            });
        });
    }
});

…or see this working TinyMCE Fiddle »

Aside: Your Fiddle wasn't properly initializing the editors because the plugin was failing to load. Since you don't need the plugin for this example, I removed it from the Fiddle to get it working.

TinyMCE 3 - textarea id which fired blur event

1 Answers1

Simplify