3

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

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

1 Answer 1

3

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

2
  • 1
    Ugh ... poor proofreading on my part strikes again. Thanks! Jul 12, 2019 at 19:36
  • It's more than just ensuring that the @CKEditorPlugin ID matches the object that is returned from the public function getButtons(). You must also make sure that the JS that is called by public function getFile() registers a plugin with the same ID as well. Jul 28, 2020 at 18:45

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.