Чтобы получить доступ к элементам iframe tinymce через jquery

Question

Я использую Tinymce Editor. При необходимости получить доступ к iframe с jquery Я пытался ...

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

----------

В приведенном выше коде однажды изображение вставлено в рамку tinymce. Как только я нажимаю на это изображение, мне нужно вызвать событие. Помоги мне.

Answer 1

Вы можете упростить доступ к документу iframes, используя:

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

РЕДАКТИРОВАТЬ: Чтобы достичь желаемого, вы можете перехватить событие click внутри tinymce и делать то, что вы хотитеЭто.Вам нужно вставить этот код в собственный плагин tinymce или использовать параметр инициализации tinymce:

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

Для 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 - это идентификатор вашей текстовой области

Поскольку с tinyMCE 4 смайлики не работают, я вернулся к 3.3.12, и все работает

Answer 3

Если вы используете версию 4, вы можете получить доступ к элементам в iframe следующим образом:

1.) Если у вас есть прямой доступ к объекту редактора:

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

2.) Если у вас нет прямого доступа к объекту редактора:

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

Answer 4

Это мой последний код для получения источника изображения в редакторе 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);
      }
    }
}

Answer 5

Попробуйте:

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