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.