Custom Elements

Custom Dropdown

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

Copy

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:

Copy

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.