Custom Image Button in Froala Editor V3

by froala

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<div id="froala-editor">
  <p>Click on the image below to see the custom image button.</p>
  <img src="https://froala.com/assets/editor/docs/photo14.jpg" class="fr-fil" alt="book" width="150"/>
</div>

JavaScript

FroalaEditor.DefineIcon('imageInfo', {NAME: 'info', SVG_KEY: 'help'});
FroalaEditor.RegisterCommand('imageInfo', {
  title: 'Info',
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  callback: function () {
    var $img = this.image.get();
    alert($img.attr('src'));
  }
});

new FroalaEditor('div#froala-editor', {
  // Set image buttons, including the name
  // of the buttons defined in customImageButtons.
  imageEditButtons: ['imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove']
})