Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.1 is here – Learn More

Skip to content

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.
    FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
    
  2. Define a button.
    FroalaEditor.RegisterCommand('myButton', {
    
  3. Set the button title.
    title: 'My Button',
    
  4. Specify the icon for the button. If this option is not specified, the button name is used.
    icon: 'buttonIcon',
    
  5. Save the button action into undo stack.
    undo: true,
    
  6. Focus inside the editor before the callback.
    focus: true,
    
  7. Set showOnMobile to 'true' to show the button on mobile.
    showOnMobile: true,
    
  8. Add the following to refresh the buttons state after the callback.
    refreshAfterCallback: true,
    
  9. Call a function when the button is hit.
    The current context is the editor instance.
    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.
    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.

Do you think we can improve this article? Let us know.