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.
Buttons
Custom Quick Insert Button
Try it yourself:
Hit enter at the end of this line to see the Quick Insert toolbar.
Quick Insert toolbar is one of the most popular editor's features. It appears when you have the cursor on a blank new line.
After defining a custom button you need to add it to the quick insert buttons list by using the quickInsertButtons option.
HTML
<div id="froala-editor"> <p>Hit enter at the end of this line to see the Quick Insert toolbar.</p> </div>
JAVASCRIPT
<script> $(function() { // 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 }) $('div#froala-editor').froalaEditor({ quickInsertButtons: ['image', 'table', 'ol', 'ul', 'myButton'], pluginsEnabled: ['quickInsert', 'image', 'table', 'lists'] }) }); </script>