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.

my custom button is added to Basic HTML toolbars

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

my custom button is missing in node creation

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

.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';

  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'
  • I've created some custom plugins for Drupal 7 and I never had/needed to create a module for them.
    – No Sssweat
    Feb 14, 2016 at 4:36
  • Well, they do it in the talk I followed first,so I just went with it.
    – Thrakbad
    Feb 14, 2016 at 10:06
  • 4
    I don't really understand why this question is on hold. What exactly is too broad here? My question is: why is the button showing in the config page, but not in the node creation page?
    – Thrakbad
    Feb 15, 2016 at 9:29
  • 1
    @Thrakbad Did you ever resolve this? I am currently having the same problem: my button appears on the Full HTML config page, but not on the node editing page. Nothing below is shedding light on the problem.
    – JOakland
    Oct 26, 2017 at 21:22
  • No, unfortunately I simply moved on from the problem and don't even have the code to reproduce it any longer. Sorry.
    – Thrakbad
    Oct 26, 2017 at 22:02

2 Answers 2


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.

  • 4
    Okay, so in Full HTML it is the same behaviour. The plugin loads, but the button is not showing. I only had a few minutes to try this out this evening, and I'll have to look at your examples more in depth to say anything more.
    – Thrakbad
    Feb 21, 2016 at 22:19
  • @wim-leers I am having same problem in D7. I am trying to use ckeditor insert module to insert file fields in ckeditor. Icons are appearing in admin ui, but not on the front end.
    – Umair
    May 25, 2017 at 13:28
  • 1
    @Umair this answer only applies to D8. I can't help you with D7, where things are much more wild west-like…
    – Wim Leers
    May 31, 2017 at 21:13
  • I have the same result as Thrakbad, where it doesn't show on the Full or Basic HTML editors, despite being on the Active toolbar. I disabled all the filtering on the Full Editor, but the problem still persists, so I don't think that is the issue. The strange thing is that I was able to get it to work with simple plugins I wrote myself, but not for the OEmbed plugin I got from the CKEditor site. Oct 10, 2018 at 17:06

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

  • Thanks for the answer. I'll try this when I am at my PC again, so it might take a while.
    – Thrakbad
    May 17, 2017 at 15:01
  • I added some missing info May 17, 2017 at 18:00
  • When it wasn't appearing on the config page at all, adding this comment fixed it. But that still leaves me with the issue of it not showing on the actual editor, even though I see it on the Active toolbar on the config page. Oct 10, 2018 at 17:01
  • Note that capital letters must also be taken into account. The array key in public function getButtons() must match precisely with what you have in editor.ui.addButton.
    – Madis
    Mar 14, 2019 at 10:31

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.