- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
Custom Elements
Custom Button
The following section shows how to create a custom button for the editor:
- First, define an icon for the button.
FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
- Define a button.
FroalaEditor.RegisterCommand('myButton', {
- Set the button title.
title: 'My Button',
- Specify the icon for the button. If this option is not specified, the button name is used.
icon: 'buttonIcon',
- Save the button action into undo stack.
undo: true,
- Focus inside the editor before the callback.
focus: true,
- Set
showOnMobile
to 'true' to show the button on mobile.
showOnMobile: true,
- Add the following to refresh the buttons state after the callback.
refreshAfterCallback: true,
- Call a function when the button is hit.
The current context is the editor instance.
callback: function () { console.log (this.html.get()); },
- 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.