Examples

Custom Image Buttons

Click on the image below to see the custom image button.

It is possible to create custom buttons within the rich text editor's image popup. This can be done by using the customImageButtons and imageButtons options.

The customImageButtons option is an Object that defines the new buttons. The key of each property represents the name of the new button and its value specifies how the button should behave. It is important to have unique names for the buttons or they will not work properly. The value is also an Object that has 4 fields: title, icon, callback and refresh. A generic property of the customImageButtons Object would look like:

name: {
          title: 'Title',
          icon: {
            type: 'icon-type',
            value: 'icon-value'
          },
          callback: function () {
            // Do something here ...
          },
          refresh: function () {
            // This method is called when the button state might have been changed.
          }
        }

title is the tooltip that appears when you go with mouse over a button. If you are using a translation, you have to make sure that you add it to the translation array of the language you are using. See languages for more details.

icon is the icon of the button. It has 2 properties that need to be set: type and value.

• type can be one of the following options: font (Font Awesome Icon), txt (Simple text) or img (Image).
• value has to be a Font Awesome class fa fa-*, a character for txt or an URL to for img.

callback is a function that will be called when the button is hit.

refresh is a function that will be called when the button state might have been changed.

After you define the new button in the customImageButtons Object, you have to include it's name in the imageButtons option at the position where you want it to be placed.

HTML

<div id="eg-custom-image-buttons" class="text-small">
          <p>Click on the image below to see the custom image button.</p>
          <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/>
        </div>

JAVASCRIPT

<script>
  $(function() {
    $('div#eg-custom-image-buttons').editable({
      inlineMode: false,

      // Set image buttons, including the name
      // of the buttons defined in customImageButtons.
      imageButtons: ['display', 'align', 'linkImage', 'info', 'removeImage'],

      // Define custom image buttons.
      customImageButtons: {
        info: {
          title: 'Image source',
          icon: {
            type: 'font',
            value: 'fa fa-info'
          },
          callback: function ($img){
            alert ($img.attr('src'));
          },
          refresh: function ($img) {
            console.log ('Refresh image button');
            console.log ($img);
          }
        }
      }
    })
  });
</script>