Buttons

Custom Quick Insert Button

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.

Edit in JSFiddle

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>