如何获取图片点击Froala Editor

Question

我想在 Froala Editor 上获取图像的 .click 来创建自定义功能，为此我想要获取我在 Froala Editor.

中选择的图像

为此我尝试了几种方法。

1.froalaEditor.click function:

$('#froala_editor').on('froalaEditor.click', function(e, editor, clickEvent) {
     console.log(clickEvent.toElement);
});

2.Custome jQuery function

$.extend({
    IFRAME: function (s) {
       var $t = $('.campaign-create-sec').find('iframe');
       if (typeof s !== 'undefined') {
             return $t.contents().find(s);
          }
             return $t;
    }
});

$('#froala_editor').on('froalaEditor.initialized', function (e, editor) {
    $.IFRAME('body').on('click', function (e) {
         console.log(e.target);
    });
});

在上面的两种情况下，我都得到了我测试的 <img> 和 <video> 以外的所有其他元素，所以我还有其他方法可以得到 甚至在 Froala Editor 中点击一张图片。

一个fiddle供您检查，任何帮助将不胜感激。

Answer 1

你可以试试这个。

var monitor = setInterval(function(){
     var iframe_found = $('iframe').length;
     console.log('iframe_found '+iframe_found);
     if (iframe_found) {
         clearInterval(monitor);
         $('iframe').contents().find("img").click(function(){
           $(this).css('border','2px solid #090');
           console.log('got that!');
         });
      }
   }, 100);

这里是 working fiddle.

setInterval() ：用于在页面加载后检查 iframe 是否存在。 iframe 可能仅在页面数据加载后加载 & 在您的情况下，它来自编辑器插件，加载可能需要一些时间。

$('iframe').length; ：确认存在 iframe.

clearInterval() ：用于破坏 setInterval()，因此避免再次检查 iframe.

而且，我们终于找到了所需的 img 标签。

试试...祝你有愉快的一天。

如何获取图片点击Froala Editor

How to get the image click on Froala Editor

javascript

jquery

editor

jquery-plugins

froala