通过jquery访问tinymce iframe元素

您可以使用以下方法更容易地访问iframes文档:

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

编辑: 为了实现您想要的,您可以捕捉tinymce中的click事件,并对其执行您想要的操作。 您需要将此代码插入自己的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

尝试:

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

如果您使用的是版本4,则可以这样访问iframe中的元素:

1.)如果您可以直接访问编辑器对象:

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

2.)如果无法直接访问编辑器对象:

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

对于版本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 你的短信地址是

因为tinyMCE 4的表情符号不起作用,所以我回到了3.3.12,一切都起作用了

这是我在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);
      }
    }
}