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

Answer 2

Try:

$("#comment_ifr").contents().filter("img").click(function() {
    alert('clicked');
});

Answer 3

If you are using version 4, you can access elements in the iframe like this:

1.) If you have direct access to the editor object:

tinymce.init({
  setup : function(editor) {
    editor.dom.$('#thingId');
  }
});

2.) If you don't have direct access to the editor object:

tinymce.activeEditor.dom.$('#thingId');

Answer 4

For tinyMCE before version 4 (ie tinymce 3.5.12 and less) you have to set

var iframe = $('#editable_container_ifr');
var editorContent = $('#tinymce[id="tinymce"]', iframe.contents()).html();
console.log(editorContent);

into the script for jquery

editable_container is the id of your textearea

Because with tinyMCE 4 the emoticons don't work I reverted to 3.3.12 and everything works

Answer 5

This is my final code to get source of an image inside tinymce editor

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

    // Firefox
    if (evt.explicitOriginalTarget){ // this is the img-element
      if (evt.explicitOriginalTarget.nodeName.toLowerCase() == 'img'){
        alert(evt.explicitOriginalTarget.src);
      }
    }
    // IE
    else if (evt.target) { // this is the img-element
      if (evt.target.nodeName.toLowerCase() == 'img'){
        alert(evt.target.src);
      }
    }
}