javascript - 如何获取图片点击Froala Editor

Question

我想得到 .click Froala Editor 上的图像以创建自定义功能，为此我想获取我在 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 中点击图片。

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

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