Custom Elements
Custom Quick Insert Button
Below is the basic JS for creating a custom button for the editor.
For a working example please see the Custom Quick Insert Button Example.
// Define an icon.
FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
// Define a button.
FroalaEditor.RegisterQuickInsertButton('myButton', {
// Icon name.
icon: 'buttonIcon',
// Tooltip.
title: 'My Button',
// Callback for the button.
callback: function () {
// Call any editor method here.
this.html.insert('Hello Froala!');
},
// Save changes to undo stack.
undo: true
})
Note: Once a button is defined it can be included in the quickInsertButtons
option.