1

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
1
  • I am still struggling with this. I have tried to implement the simplebox ckeditor tutorial as a Drupal module and I have hit the same roadblock. No errors whatsoever but the button is not showing. It does show on the admin pages though: github.com/esclapes/editor_simplebox
    – Esclapes
    Commented Dec 14, 2015 at 15:30

1 Answer 1

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'
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.