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
.