It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
- Documentation
- Concepts
- Custom Elements
- Save
- File
- Image
- Video
- Embedly Plugin
- Migration Guides
- From TinyMCE
- From V1
Custom Elements
Custom Button
Custom Plugin
Custom Dropdown
Custom Icon
Custom Popup
Custom Quick Insert Button
Custom Shortcut
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.