6

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
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);
  }
});
  • I've created some custom plugins for Drupal 7 and I never had/needed to create a module for them. – No Sssweat Feb 14 '16 at 4:36
  • Well, they do it in the talk I followed first,so I just went with it. – Thrakbad Feb 14 '16 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 '16 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 '17 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 '17 at 22:02
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 '16 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 '17 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 '17 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. – Kimberly W Oct 10 '18 at 17:06
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',{
  • Thanks for the answer. I'll try this when I am at my PC again, so it might take a while. – Thrakbad May 17 '17 at 15:01
  • I added some missing info – KonchenayaTvar May 17 '17 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. – Kimberly W Oct 10 '18 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 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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