- 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
- Froala Docs
- /
- Concepts
- /
- Custom
- /
- Quick Insert Button
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.
Do you think we can improve this article? Let us know.