Custom Dropdowns

HTML

<div id="eg-custom-dropdown" class="text-small">
          <p>An example of custom dropdown for the WYSIWYG HTML editor.</p>
        </div>

JAVASCRIPT

<script>
  $(function() {
    $('div#eg-custom-dropdown').editable({
      inlineMode: false,
      buttons: ['bold', 'italic', 'formatBlock', 'my_dropdown'],
      customDropdowns: {
        my_dropdown: {
          // Dropdown Title
          title: 'Advanced options',

          // Dropdown Icon
          icon: {
            type: 'font',
            value: 'fa fa-cog'
          },

          // Callback on refresh.
          refresh: function () {
            console.log ('do refresh');
          },

          // Callback on dropdown show.
          refreshOnShow: function () {
            console.log ('do refresh when show');
          },

          // Options.
          options: {
            // First option.
            '<i class="fa fa-save"></i> Save': function () {
              this.save();
            },

            // Second option.
            '<i class="fa fa-refresh"></i> Clear': function () {
              this.setHTML('');
            }
          }
        }
      }
    })
  });
</script>