Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 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.