如何在 Froala 编辑器上获取图像

Question

我想在 Froala Editor 上获取图片的.click 来创建自定义功能，因为我想获取我在Froala 编辑器。

我已经尝试了几种方法。

1.froalaEditor.click函数：

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

2.自定义jQuery函数

$.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 编辑器。

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 标签。

试试……祝你有美好的一天。