Custom Elements

Custom Dropdown

The following example shows how to create a custom dropdown for the editor:

1. Define an icon.
   Copy

   FroalaEditor.DefineIcon('dropdownIcon', { NAME: 'magic'})
   

2. Define a dropdown button.
   Copy

   FroalaEditor.RegisterCommand('myDropdown', {
   

3. Set a title.
   Copy

   title: 'My Dropdown',
   

4. Mark the button as a dropdown.
   Copy

   type: 'dropdown',
   

5. Specify the icon for the button. If this option is not specified, the button name will be used.
   Copy

   icon: 'dropdownIcon',
   

6. Options for the dropdown.
   Copy

   options: {
     'opt1': 'Option 1',
     'opt2': 'Option 2'
   },
   

7. If present, the options property will be ignored.
   It can be used to define a custom HTML for the dropdown.
   The current context is the editor instance.
   Copy

   html: function () {
     return '';
   },
   

8. Save the dropdown action into undo stack.
   Copy

   undo: true,
   

9. Focus inside the editor before callback.
   Copy

   focus: true,
   

10. Refresh the button state after the callback.
    Copy

    refreshAfterCallback: true,
    

11. Add a callback.
    The current context is the editor instance.
    Copy

    callback: function (cmd, val, params) {
      console.log (this.html.get());
    },
    

12. Call a function when the dropdown button state might have changed.
    The current context is the editor instance.
    Copy

    refresh: function ($btn) {
      console.log (this.selection.element());
    },
    

13. Call a function when the dropdown is shown.
    The current context is the editor instance.
    Copy

    refreshOnShow: function ($btn, $dropdown) {
    

console.log (this.selection.element()); } })

Your final code should look like this:

FroalaEditor.DefineIcon('dropdownIcon', { NAME: 'magic'})

FroalaEditor.RegisterCommand('myDropdown', {
  title: 'My Dropdown',
  type: 'dropdown',
  icon: 'dropdownIcon',
  options: {
    'opt1': 'Option 1',
    'opt2': 'Option 2'
  },
  html: function () {
    return '';
  },
  undo: true,
  focus: true,
  refreshAfterCallback: true,
  callback: function (cmd, val, params) {
    console.log (this.html.get());
  },
  refresh: function ($btn) {
    console.log (this.selection.element());
  },
  refreshOnShow: function ($btn, $dropdown) {
    console.log (this.selection.element());
  }
})

For a working example please refer to the Custom Dropdown Example

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.