Custom Elements

Custom Button

Below is the basic JS for creating a custom button for the editor.

For a working example please see the Custom Buttons Example or the Custom Image Button Example

// Define an icon.
$.FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})

// Define a button.
$.FroalaEditor.RegisterCommand('myButton', {
  // Button title.
  title: 'My Button',

  // Specify the icon for the button.
  // If this option is not specified, the button name will be used.
  icon: 'buttonIcon',

  // Save the button action into undo stack.
  undo: true,

  // Focus inside the editor before the callback.
  focus: true,

  // Show the button on mobile or not.
  showOnMobile: true,

  // Refresh the buttons state after the callback.
  refreshAfterCallback: true,

  // Called when the button is hit.
  callback: function () {
    // The current context is the editor instance.
    console.log (this.html.get());
  },

  // Called when the button state might have changed.
  refresh: function ($btn) {
    // The current context is the editor instance.
    console.log (this.selection.element());
  }
})

Note: Once a command is defined it can be included in any option that is using buttons: imageAltButtons, imageEditButtons, imageInsertButtons, imageSizeButtons, linkEditButtons, linkInsertButtons, tableColorsButtons, tableEditButtons, tableInsertButtons, toolbarButtons, toolbarButtonsMD, toolbarButtonsSM, toolbarButtonsXS, videoEditButtons, videoInsertButtons or videoSizeButtons.