To access iframe tinymce elements via jquery

Question

I am using the Tinymce editor. Need to access tinymce iframe with jquery I 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 previous code, as soon as the image is inserted into the tinymce iframe. As soon as I click on this image, I need to trigger an event. Help me.

Answer 1

An iframes document can be simplified 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 want. You need to paste this code into your own tinymce plugin or use the tinymce initialization parameter:

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

4, iframe :

1.) :

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

2.) :

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

Answer 4

tinyMCE 4 ( tinymce 3.5.12 )

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

jquery

editable_container - textearea

tinyMCE 4 , 3.3.12,

Answer 5

, tinymce

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