1

First of all, I'd like to mention this answer is not related, I'm using Drupal 8.6.1.

I'm trying to create a CKEditor plugin with a new button. In the /admin/config/content page I get the error but the button appears well:

Error in console but icon appears

However when I go to /node/add/article page, I get the error and there is a display issue on CKEditor windows:

enter image description here

Clearing the cache does not change anything.
The error does not appear anymore when I uninstall my custom D8 module.


modules/custom/inline_comment/js/plugins/inline_comment/plugin.js

CKEDITOR.plugins.add('comment', {

    icons: 'comment', 

    // The plugin initialization logic goes inside this method.
    init: function (editor) {
        // Define the editor command that add a comment.
        editor.addCommand('comment', {
            // Define the function that will be fired when the command is executed.
            exec: function (editor) {
                ...
            }
        });

        // Create the toolbar button that executes the above command.
        editor.ui.addButton('Comment', {
            label: 'Add comment',
            command: 'comment',
            toolbar: 'insert'
        });

modules/custom/inline_comment/src/Plugin/CKEditorPlugin/InlineComment.php

namespace Drupal\inline_comment\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\ckeditor\CKEditorPluginConfigurableInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "inline_comment" plugin.
 *
 * @CKEditorPlugin(
 *   id = "inline_comment",
 *   label = @Translation("CKEditor Inline Comment")
 * )
 */
class InlineComment extends CKEditorPluginBase implements CKEditorPluginConfigurableInterface {

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

  public function getButtons() {
    return [
      'Comment' => [
        'label' => t('Linkit'),
        'image' => drupal_get_path('module', 'inline_comment') . '/js/plugins/inline_comment/icons/comment.png',
      ],
    ];
  }

The location of the icon is: modules/custom/inline_comment/js/plugins/inline_comment/icons/comment.png

  • IIRC the plugin IDs need to match, currently there's a disparity between inline_comment and comment – Clive Nov 6 '18 at 11:17
  • Good catch @Clive. Feel free to write it as an answer to make me able to accept it ;) – Kwadz Nov 6 '18 at 13:22
1

To anyone who is running into this issue:

 * Defines the "inline_comment" plugin.
 *
 * @CKEditorPlugin(
 *   id = "machine_name_that_must_match_with_icons",
 *   label = @Translation("CKEditor Inline Comment")
 * )
 */

and

getButtons() must return the same ID.

Annotation is new to me and I am sure it's not new to anyone else who are Drupal 8 developers but it might help someone who is new/still learning about how Drupal 8 works.

https://www.drupal.org/docs/8/api/plugin-api/annotations-based-plugins

  • Ugh ... poor proofreading on my part strikes again. Thanks! – Delford Chaffin Jul 12 at 19:36

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.