Custom Elements

Custom Button

The following section shows how to create a custom button for the editor:

1. First, define an icon for the button.
   Copy

   FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
   

2. Define a button.
   Copy

   FroalaEditor.RegisterCommand('myButton', {
   

3. Set the button title.
   Copy

   title: 'My Button',
   

4. Specify the icon for the button. If this option is not specified, the button name is used.
   Copy

   icon: 'buttonIcon',
   

5. Save the button action into undo stack.
   Copy

   undo: true,
   

6. Focus inside the editor before the callback.
   Copy

   focus: true,
   

7. Set showOnMobile to 'true' to show the button on mobile.
   Copy

   showOnMobile: true,
   

8. Add the following to refresh the buttons state after the callback.
   Copy

   refreshAfterCallback: true,
   

9. Call a function when the button is hit.
   The current context is the editor instance.
   Copy

   callback: function () {
     console.log (this.html.get());
   },
   

10. Call a function when the button state might have changed.
    The current context is the editor instance.
    Copy

    refresh: function ($btn) {
      console.log (this.selection.element());
    }
    

Your final code should look like this:

FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})

FroalaEditor.RegisterCommand('myButton', {
  title: 'My Button',
  icon: 'buttonIcon',
  undo: true,
  focus: true,
  showOnMobile: true,
  refreshAfterCallback: true,
  callback: function () {
    console.log (this.html.get());
  },
  refresh: function ($btn) {
    console.log (this.selection.element());
  }
})

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

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.