Question

我使用Tinymce编辑器。需要使用jquery访问tinymce iframe 我试过......

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 iframe。一旦我点击该图像，我需要触发一个事件。帮助我。

Answer 1

您可以使用以下方式更轻松地访问iframe文档：

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

编辑：为了达到你想要的效果，你可以在tinymce中捕捉点击事件并用它做你想做的事。您需要将此代码插入到自己的tinymce插件中或使用tinymce init参数：

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

尝试：

$("#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

对于版本4之前的tinyMCE（即tinymce 3.5.12及更低版本），您必须设置

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

进入jquery脚本

editable_container是您的textearea的ID

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

通过jquery访问tinymce iframe元素

5 个答案: