Examples

Custom Buttons

Froala WYSIWYG HTML Editor covers a lot of functionalities through the default buttons. You may need buttons with another behavior to be integrated in the toolbar. This can be done by using the customButtons and buttons options.

The customButtons 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 in the rich text editor. 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 customButtons 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 customButtons Object, you have to include it's name in the buttons option at the position where you want it to be placed.

An example with all these types of buttons:

HTML

<div id="eg-custom-buttons" class="text-small">
          <p>You can see the new buttons added after the separator in the toolbar.</p>
        </div>

JAVASCRIPT

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

      // Set custom buttons with separator between them. Also include the name
      // of the buttons  defined in customButtons.
      buttons: ['undo', 'redo' , 'bold', 'sep', 'alert', 'clear', 'insertHTML'],

      // Define custom buttons.
      customButtons: {
        // Alert button with Font Awesome icon.
        alert: {
          title: 'Alert',
          icon: {
            type: 'font',

            // Font Awesome icon class fa fa-*.
            value: 'fa fa-info'
          },
          callback: function () {
            alert ('Hello!')
          },
          refresh: function () { }
        },

        // Clear HTML button with text icon.
        clear: {
          title: 'Clear HTML',
          icon: {
            type: 'txt',
            value: 'x'
          },
          callback: function () {
            this.setHTML('');
            this.focus();
          },
          refresh: function () { }
        },

        // Insert HTML button with image button.
        insertHTML: {
          title: 'Insert HTML',
          icon: {
            // Recommended size: 40 x 35.
            type: 'img',

            // src for the image.
            value: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+'
          },
          callback: function () {
            // Insert HTML.
            this.insertHTML('My new HTML');

            // Save HTML in undo stack.
            this.saveUndoStep();
          },
          refresh: function () { }
        }
      }
    })
  });
</script>