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.

Custom Elements

Custom Button Custom Plugin Custom Dropdown Custom Icon Custom Popup Custom Quick Insert Button Custom Shortcut

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.