How to get the image click on Froala Editor

Question

I want to get the .click of the image on Froala Editor to create a customize function, for that I want to get the image I have selected in the Froala Editor.

I have Tried a couple of methods for this.

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

In the above, both cases I am getting all the other elements other than <img> and <video> of what I tested, so Is there any other way for me to get the click even for an image in Froala Editor.

A fiddle for you to check, any help will be appreciated.

Answer 1

You can try this.

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

Here is the working fiddle.

setInterval() : For checking iframe presence after page load. iframe may only load after the page data is loaded & in your case its from a editor plugin, may take some time surly to load.

$('iframe').length; : Confirms presence of iframe.

clearInterval() : For destroying the setInterval(), so avoids multiple checking again for iframe.

And, at last we are finding required img tag.

Try... Have a nice day.