通过jquery访问tinymce iframe元素

我使用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

这是我在tinymce编辑器中获取图像源代码的最终代码

 ed.onClick.add（function（ed，evt）{

     // Firefox
     if（evt.explicitOriginalTarget）{//这是img-element
       if（evt.explicitOriginalTarget.nodeName.toLowerCase（）=='img'）{
        警报（evt.explicitOriginalTarget.src）;
       }
     }
     // IE
     else if（evt.target）{//这是img-element
       if（evt.target.nodeName.toLowerCase（）=='img'）{
        警报（evt.target.src）;
       }
     }
 }