web-dev-qa-db-fra.com

Comment corriger l'erreur «Impossible de lire la propriété« icônes »de null»?

Tout d'abord, je voudrais mentionner cette réponse n'est pas liée, j'utilise Drupal 8.6.1.

J'essaie de créer un plugin CKEditor avec un nouveau bouton. Dans la page /admin/config/content j'obtiens l'erreur mais le bouton apparaît bien:

Error in console but icon appears

Cependant, lorsque je vais sur la page /node/add/article , j'obtiens l'erreur et il y a un problème d'affichage sur les fenêtres CKEditor:

enter image description here

Vider le cache ne change rien.
L'erreur n'apparaît plus lorsque je désinstalle mon module D8 personnalisé.

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',
      ],
    ];
  }

L'emplacement de l'icône est: modules/custom/inline_comment/js/plugins/inline_comment/icons/comment.png

8wysiwygplugins
2
Kwadz

À tous ceux qui rencontrent ce problème:

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

et

getButtons() doit renvoyer le même ID.

L'annotation est nouvelle pour moi et je suis sûr que ce n'est pas nouveau pour quiconque qui est Drupal 8 développeurs, mais cela pourrait aider quelqu'un qui est nouveau/en train d'apprendre sur le fonctionnement de Drupal 8.

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

2
Simon Song