Add CKEditor widget (footnotes) from external addon

Question

I want to add CKEditor footnotes addon to a Drupal 8 toolbar.

The plugin seems to load as I can add the button when configuring the input format and I see CKEDITOR.plugins.externals.footnotes is defined and pointing to my plugin file. However the button does not show in the toolbar. No errors or warnings in the console.

This is my /modules/custom/ckeditorfootnotes/src/Plugin/CKEditorPlugin/CKEditorFootnotes.php

class CKEditorFootnotes extends CKEditorPluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

  /**
   * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getFile().
   */
  function getFile() {
    return drupal_get_path('module', 'ckeditorfootnotes') . '/js/footnotes/plugin.js';
  }

  /**
   * Implements \Drupal\ckeditor\Plugin\CKEditorPluginButtonsInterface::getButtons().
   */
  function getButtons() {
    return array(
      'CKEditorFootnotes' => array(
        'label' => t('Footnotes'),
        'image' => drupal_get_path('module', 'ckeditorfootnotes') . '/js/footnotes/icons/footnotes.png'
      )
    );
  }

This is filter.format.basic_html

    uuid: b47ec9da-02dc-420c-8100-c2127d8e5012
    langcode: ca
    status: true
    dependencies:
      module:
        - editor
    name: 'HTML bàsic'
    format: basic_html
    weight: 0
    filters:
      filter_html:
        id: filter_html
        provider: filter
        status: false
        weight: -10
        settings:
          allowed_html: '<a href hreflang target> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p> <br> <span> <img src alt height width data-entity-type data-entity-uuid data-align data-caption> <s> <table> <caption> <tbody> <thead> <tfoot> <th> <td> <tr> <sub> <sup> <section>'
          filter_html_help: false
          filter_html_nofollow: false
      filter_align:
        id: filter_align
        provider: filter
        status: true
        weight: 7
        settings: {  }
      filter_caption:
        id: filter_caption
        provider: filter
        status: true
        weight: 8
        settings: {  }
      filter_html_image_secure:
        id: filter_html_image_secure
        provider: filter
        status: true
        weight: 9
        settings: {  }
      editor_file_reference:
        id: editor_file_reference
        provider: editor
        status: true
        weight: 11
        settings: {  }

And finally editor.editor.basic_html

uuid: 175d53b1-06a9-4aca-9755-85595f23633b
langcode: ca
status: true
dependencies:
  config:
    - filter.format.basic_html
  module:
    - ckeditor
    - editor_file
third_party_settings:
  editor_file:
    status: true
    scheme: public
    directory: inline-files
    extensions: txt
format: basic_html
editor: ckeditor
settings:
  toolbar:
    rows:
      -
        -
          [... several groups ...]
        -
          name: Media
          items:
            - CKEditorFootnotes
            - DrupalFile
            - Blockquote
            - DrupalImage
            - Table
        -
          [... more groups ...]
  plugins:
    stylescombo:
      styles: ''
image_upload:
  status: true
  scheme: public
  directory: inline-images
  max_size: ''
  max_dimensions:
    width: null
    height: null

Answer 1

It turns out you need to call editor.ui.addButton() to get the buttons to show.

It seems to me that it is not usually needed in vanilla CKEditor development, because it is not included neither in the tutorials nor in the ckeditorfootnotes plugin. However, most of the current Drupal 8 CKEditor modules do include it in the plugin source.

For the simplebox plugin it would read like this, here command is the name of the defined widget.

editor.ui.addButton('SimpleBox', {
    label: Drupal.t('SimpleBox'),
    command: 'simplebox',
    icon: this.path + 'icons/simplebox.png'
});