Custom button for CKEditor not showing up in node creation page

Question

I want to add a simple custom button to CKEditor in Drupal 8. So far I followed the Instructions here and here, and my custom button is showing up on the configuration page under Configuration > Content authoring > Text formats and editors, where I added it to the Basic HTML and Full HTML presets.

However, when I want to create a new article, the button is not being shown in the editor toolbar.

I can verify by JS console outputs that my plugin is being loaded by CKEditor, and the init function actually runs. The button just does not appear. I appreciate any pointers. I have seen this question, where somebody seems to have a similar problem, but I don't really understand the accepted answer as it seems to be specific to CKEditor templates. So my question is: why does my button show up in the configuration page, but not in the node creation page, although the corresponding JS is being run?

I have not implemented any hooks in my module.

info.yml of my module

name: Glossarion
type: module
description: >
  Some description. I'll think about it later.
core: 8.x
version: 0.1
package: CKEditor
dependencies:
  -ckeditor

.php of my Drupal plugin

class Glossarion extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

public function getDependencies(Editor $editor) { return array(); }
public function getLibraries(Editor $editor) { return array(); }
public function isInternal() { return FALSE; }
public function getConfig(Editor $editor) { return array(); }
public function isEnabled(Editor $editor) { return TRUE; }

public function getFile() {
  return drupal_get_path('module', 'glossarion') . '/js/plugins/glossarion/plugin.js';
}

public function getButtons() {
  return [
    'glossarion' => [
      'label' => t('Insert a Word from Glossarion'),
      'image' => drupal_get_path('module', 'glossarion') . '/js/plugins/glossarion/icons/glossarion-editor-icon.png',
      'command' => 'insertTimestamp'
    ]
  ];
}
}

.js of my CKEditor Plugin

'use strict';

CKEDITOR.plugins.add('glossarion',{
  icons: 'glossarion-editor-icon', // %REMOVE_LINE_CORE%
  init : function( editor ) {
    console.log("Glossarion init is being called");
    editor.addCommand( 'insertTimestamp', {
        exec: function( editor ) {
            var now = new Date();
            editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
        }
    });
    // do I have to add the button here again? Seems to have no effect
    editor.ui.addButton( 'Timestamp', {
        label: 'Insert Timestamp',
        command: 'insertTimestamp',
        toolbar: 'basicstyles,0'
    });
    console.debug(editor);
  }
});

Answer 1

See the documentation at https://www.drupal.org/developing/api/8/ckeditor.

You can find examples in Drupal 8 core, at:

• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\Llama
• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaButton
• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextual
• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextualAndButton

(This is the exact same answer as I gave at https://drupal.stackexchange.com/a/191869/7632.)

---

To answer specifically why the button is not showing: CKEditor's Advanced Content Filter (ACF).

Please add your button to CKEditor in the "Full HTML" text format. Check if it shows up then. Chances are it does.

Your plugin does not specify ACF metadata. ACF is what ensures CKEditor produces clean markup. In "Full HTML", there are no restrictions, and no guarantees of clean markup.

Answer 2

If your button is not visible while editing a node but it is visible in the configuration file, that means that the value you have on the getButtons() function doesn't match with the values from plugin.js. This got me back and forth for a while.

editor.ui.addButton( 'glossarion', {
    label: 'Insert Timestamp',
    command: 'insertTimestamp',
    toolbar: 'basicstyles,0'
});

Perhaps you should also define id in comment for you plugin before class

 /**
 * Defines the "Glossarion" plugin.
 *
 * @CKEditorPlugin(
 *   id = "glossarion",
 *   label = @Translation("Glossarion ")
 * )
 */
class Glossarion extends CKEditorPluginBase {

you use this id here

CKEDITOR.plugins.add('glossarion',{