Custom Elements

Custom Dropdown

Below is the basic JS for creating a custom dropdown for the editor.

For a working example please see the Custom Dropdown Example

// Define an icon.
$.FroalaEditor.DefineIcon('dropdownIcon', { NAME: 'magic'})

// Define a dropdown button.
$.FroalaEditor.RegisterCommand('myDropdown', {
  // Button title.
  title: 'My Dropdown',

  // Mark the button as a dropdown.
  type: 'dropdown',

  // Specify the icon for the button.
  // If this option is not specified, the button name will be used.
  icon: 'dropdownIcon',

  // Options for the dropdown.
  options: {
    'opt1': 'Option 1',
    'opt2': 'Option 2'
  },

  // If present, the options property will be ignored.
  // It can be used to define a custom HTML for the dropdown.
  html: function () {
    // The current context is the editor instance.
    return '';
  },

  // Save the dropdown action into undo stack.
  undo: true,

  // Focus inside the editor before callback.
  focus: true,

  // Refresh the button state after the callback.
  refreshAfterCallback: true,

  // Callback.
  callback: function (cmd, val, params) {
    // The current context is the editor instance.
    console.log (this.html.get());
  },

  // Called when the dropdown button state might have changed.
  refresh: function ($btn) {
    // The current context is the editor instance.
    console.log (this.selection.element());
  },

  // Called when the dropdown is shown.
  refreshOnShow: function ($btn, $dropdown) {
    // The current context is the editor instance.
    console.log (this.selection.element());
  }
})

Note: Once a command is defined it can be included in the buttons options: imageAltButtons, imageEditButtons, imageInsertButtons, imageSizeButtons, linkEditButtons, linkInsertButtons, tableColorsButtons, tableEditButtons, tableInsertButtons, toolbarButtons, toolbarButtonsMD, toolbarButtonsSM, toolbarButtonsXS, videoEditButtons, videoInsertButtons or videoSizeButtons.