To access tinymce iframe elements through jquery

Question

I an using Tinymce Editor. In need to access tinymce iframe with jquery I had tried...

var iframe = $('#comment_ifr')[0];//document.getElementById('comment_ifr');// or $('#comment_ifr')[0]; the other is just faster.
alert(iframe);
var doc = iframe.document || iframe.contentDocument || iframe.contentWindow && iframe.contentWindow.document || null;
   //if( !doc ) return;
   //and now jquery

$( "img", doc ).click(function() {
    alert('image clicked');
   });

----------

In my above code once an image inserted in tinymce iframe. Once i click that image i need to trigger an event. Help me.

Answer 1

You can get easier to the iframes document by using:

var doc = tinymce.get('comment').getDoc();

EDIT: To achieve what you want you can catch the click event inside tinymce and do what you wish with it. You need to insert this code into an own tinymce plugin or use the tinymce init paramater:

ed.onClick.add(function(ed, evt){

    // Firefox
    if (evt.explicitOriginalTarget){ // this is the img-element
      if (evt.explicitOriginalTarget.nodeName.toLowerCase() == 'img'){
        console.log(evt.explicitOriginalTarget);
        alert('image clicked');
      }
    }
    // IE
    else if (evt.target) { // this is the img-element
      if (evt.target.nodeName.toLowerCase() == 'img'){
        console.log(evt.target);
        alert('image clicked');
      }
    }
}); // end click event