Comment ajouter un nouveau bouton (plugin) à CKEditor pt. II

Dans l'un de nos articles précédents, nous vous avons montré comment configurer CKEditor dans Drupal 8. Utiliser l'interface utilisateur disponible est génial, mais parfois les clients nécessitent des fonctionnalités supplémentaires. Les grands sites Web d'entreprise avec des équipes éditoriales doivent pouvoir réaliser des choses uniques rapidement et nécessitent donc souvent des fonctions personnalisées.

Nous allons vous montrer comment vous pouvez étendre la fonctionnalité de l'éditeur par vous-même.
 
Dans le cas de nombreux sites Web, les fonctions de base de CKEditor sont plus que suffisantes. 
Cependant, il existe des projets où les clients exigent d'étendre la fonctionnalité de l'éditeur de contenu.
Avec CKEditor, vous pouvez le faire à l'aide de plug-ins – tous sont disponibles sur le site officiel.
http://ckeditor.com/addons/plugins/all 
Ajouter un nouveau plug-in au site basé sur Drupal 8 est très simple comparé à la façon dont c'était fait dans la version précédente de Drupal. Vous n'avez besoin que de créer un module simple.
 
Comme notre exemple, j'ai choisi un plug-in qui nous permettra de publier un clip YouTube à l'aide d'un code intégré ou de son URL.
 

Le plug-in en question : https://ckeditor.com/cke4/addon/youtube 
Créez un module nommé cke_youtube (ou choisissez votre propre nom).
 
La structure du module est la suivante :
 
cke_youtube.info.yml contient les données standard du module.
cke_youtube.module est un fichier PHP vide, nous n'avons pas besoin de code ici.
 
La structure contient deux répertoires supplémentaires :
Répertoire du plug-in - js. 
Là, vous trouverez un autre répertoire nommé "plugins".
Décompressez les fichiers téléchargés depuis https://ckeditor.com/cke4/addon/youtube  là.
 
 

Créer un nouveau plug-in dans Drupal se fait dans un nouveau fichier de classe, que nous devons créer puis configurer correctement.
Dans notre cas, ce sera Youtube.php, et la structure entière doit ressembler à ceci.
 

Code :

<?php

namespace Drupal\cke_youtube\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\Component\Plugin\PluginBase;
use Drupal\editor\Entity\Editor;

/**
 * Définit le plug-in "Youtube", avec un CKEditor.
 *
 * @CKEditorPlugin(
 *   id = "youtube",
 *   label = @Translation("Plug-in Youtube")
 * )
 */
class Youtube extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

  /**
   * {@inheritdoc}
   */
  public function getDependencies(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function getLibraries(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function isInternal() {
    return FALSE;
  }

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return drupal_get_path('module', 'cke_youtube') . '/js/plugins/youtube/plugin.js';
  }

  /**
   * @return array
   */
  public function getButtons() {
    $iconImage = drupal_get_path('module', 'cke_youtube') . '/js/plugins/youtube/images/icon.png';

    return [
      'Youtube' => [
        'label' => t('Ajouter une vidéo YouTube'),
        'image' => $iconImage,
      ]
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return [];
  }

}

La classe YouTube utilise deux interfaces -  CKEditorPluginInterface, CKEditorPluginButtonsInterface
Regardez de plus près son commentaire. La variable “id” doit contenir le même nom que le nom du plug-in que vous installez. 
Dans ce cas, le nom est “youtube”.
Pour d'autres plug-ins, vous trouverez le nom dans le fichier plugin.js.

Ci-dessous, je vais discuter brièvement de toutes les méthodes et de ce qu'elles font :
getDependencies()
Ici, vous mettrez tous les noms des plug-ins requis pour que votre plug-in fonctionne.
S'ils ne sont pas nécessaires, vous laissez la méthode vide, et notre plug-in YouTube est l'un de ces cas.
Vous trouverez les plug-ins requis dans le fichier plugin.js.
Exemple pour le plug-in Layout Manager :
 

Dans ce cas, vous auriez dû d'abord installer basewidget, puis ajouter layoutmanager.

getLibraries()
Spécifie les bibliothèques supplémentaires.

getFile()
Emplacement du plug-in.

getButtons()
Ajoute un nouveau bouton à l'éditeur.
 
Veuillez garder à l'esprit que vous devez utiliser un nom correct dans le tableau de retour :
Dans le cas de ce plug-in, le nom correct est “Youtube”.

Vous pouvez trouver le nom requis dans le fichier plugin.js.

À cet endroit où la structure entière et les noms sont corrects, vous pouvez activer votre nouveau module.
Allez dans Extension (/admin/modules/)
 

Maintenant, allez aux formats de texte et à la configuration de l'éditeur

Configuration → Rédaction de contenu → Formats et éditeurs de texte (/admin/config/content/formats/)

Ajoutez un nouveau bouton à l'éditeur pour un format sélectionné.

Après avoir appliqué les modifications, ajoutez un nouveau contenu et sélectionnez le format de texte pour lequel vous venez de configurer le bouton Ajouter une vidéo YouTube.
Si tout fonctionne bien, une fenêtre s'ouvrira après avoir cliqué sur le bouton, vous permettant d'entrer votre code intégré ou l'URL de votre clip.