Question

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

我尝试了几种方法。

1.froalaEditor.click功能：

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

2.Custome 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>之外，我还得到了除$("#dropdownid").change(function () { $.ajax({ type: "GET", url: $('#hdnPath').val() + '/Controller/TestActionmethod', data: { dropdownid: $("#dropdownid").val() }, contentType: 'application/json; charset=utf-8', dataType: "json" });和return View("viewName", Viewmodel );以外的所有其他元素，那么还有其他任何方法可以让点击甚至对于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标记。

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

如何获取图像点击Froala编辑器

1 个答案: