如何在 Froala Editor 上點擊圖片

Question

我想要得到的.click上Froala編輯的圖像創建一個自定義功能，對於我想我在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 Editor 中的圖像。

一個小提琴供您檢查，任何幫助將不勝感激。

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);

這是工作小提琴。

setInterval() ：用於在頁面加載后檢查iframe是否存在。 iframe可能僅在頁面數據加載后加載，在您的情況下，它來自編輯器插件，加載可能需要一些時間。

$('iframe').length; : 確認iframe存在。

clearInterval() ：用於銷毀setInterval() ，因此避免對iframe再次進行多次檢查。

而且，最后我們找到了所需的img標簽。

試試... 祝你有美好的一天。