Buttons

Custom Quick Insert Button

Try it yourself:

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.

Edit in JSFiddle

HTML

Copy

<div id="froala-editor">
  <p>Hit enter at the end of this line to see the Quick Insert toolbar.</p>
</div>

JAVASCRIPT

Copy

<script>
  // Define an icon.
  FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star', SVG_KEY: '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
  })

  new FroalaEditor('div#froala-editor', {
    quickInsertButtons: ['image', 'table', 'ol', 'ul', 'myButton'],
    pluginsEnabled: ['quickInsert', 'image', 'table', 'lists']
  })
</script>