Froala Editor Base

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/css/froala_editor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/css/plugins/image.css">

<section id="froala_editor">
  <div id='edit' style="margin-top: 30px;">
    <h1>Image selector</h1>
    <img src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="Smiley face">
    <p>There are 2 options that can be used to customize the way table resize works:</p>

    <ul>
      <li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizerOffset" title="tableResizerOffset option" target="_blank">tableResizerOffset</a> - The distance in pixels from the table cell's left or right border at which to show the resizer.
      </li>
      <li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizingLimit" title="tableResizingLimit option" target="_blank">tableResizingLimit</a> - The minimum width in pixels of a table cell allowed while resizing. The resizer cannot be dragged
        over this limit.</li>
    </ul>
  </div>
</section>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/js/froala_editor.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/js/plugins/link.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/js/plugins/image.min.js"></script>

CSS

body {
  text-align: center;
}

section {
  width: 81%;
  margin: auto;
  text-align: left;
}

JavaScript

$(function() {
  $('#froala_editor').froalaEditor({
      linkEditButtons: ['linkOpen', 'linkEdit', 'linkRemove', 'buttonBackground'],
      toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'table', '|', 'undo', 'redo'],
      tableResizerOffset: 10,
      tableResizingLimit: 50,
      iframe: true
    })
    .on('froalaEditor.click', function(e, editor, clickEvent) {
      console.log(clickEvent.toElement);
    });

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

});