Erstellen eines benutzerdefinierten CKEditor-Plugins in Drupal 8

Der Bearbeitungsprozess kann sehr aufwendig sein und eine umfassende und präzise Suche, Bearbeitung, Kategorisierung sowie zahlreiche weitere Anpassungen umfassen. In seinem Artikel „How to De-couple Drupal in 2018“ spricht Dries über die Erstellung und Konzeption einer benutzerdefinierten Redaktionsschnittstelle, die Content-Editoren die nötige Kontrolle über eine wachsende Anzahl von Kanälen gibt.

Was ist CKEditor?
Webinhalte werden in HTML erstellt und umfassen sowohl Text als auch spezielle Tags. Diese Tags dienen der Auszeichnung von Inhaltselementen, wobei deren grundlegende Bestandteile berücksichtigt werden. Sie werden als „Überschriften“, „Absätze“, „fetter Text“, „kursiver Text“ usw. definiert. CKEditor verbirgt die HTML-Tags lediglich vor dem Webnutzer und präsentiert sie in der grafischen Benutzeroberfläche. Es ist auch ein WYSIWYG-Rich-Editor, was bedeutet, dass die geschriebene Eingabe der Ausgabe entspricht.

CKEditor in Drupal

Obwohl CKEditor fester Bestandteil von Drupal 8 ist (eine Out-of-the-Box-Funktion), müssen bestimmte Funktionen und Features über Plugins hinzugefügt werden. Ebenso wird die Suchfunktion hinzugefügt, um die Benutzeroberfläche für den Editor zu verbessern. Das Modul bietet auch erweiterte APIs, um seine Funktionen durch die Erstellung benutzerdefinierter Module zu erweitern.  

CKEditor-Plugin 

Das CKEditor-Plugin wird dabei helfen, Funktionen zum bestehenden Ökosystem hinzuzufügen. Dies wird die Anpassung unterstützen und ermöglichen.

Funktionen: 

1. CKEditorPluginInterface::getConfig : Gibt die Ergänzungen zu CKEDITOR.config für eine spezifische CKEditor-Instanz zurück.
2. CKEditorPluginInterface::getDependencies : Gibt eine Liste der Plugins zurück, die dieses Plugin benötigt.
3. CKEditorPluginInterface::getFile : Gibt den Drupal-Root-relativen Dateipfad zur JavaScript-Datei des Plugins zurück.
4. CKEditorPluginInterface::getLibraries : Gibt eine Liste der Bibliotheken zurück, die dieses Plugin benötigt.
5. CKEditorPluginInterface::isInternal : Gibt an, ob dieses Plugin Teil des optimierten CKEditor-Builds ist.
6. PluginInspectionInterface::getPluginDefinition : Ruft die Definition der Plugin-Implementierung ab.
7. PluginInspectionInterface::getPluginId : Ruft die plugin_id der Plugin-Instanz ab.

Nun erstellen wir ein benutzerdefiniertes Drupal 8 CKEditor Google Search Modul, das einen Suchbutton mit der Funktionalität der Google-Suche für die ausgewählten Wörter im Editor bereitstellt, unter Verwendung des Google Search-Plugins. 

Fangen wir an!!

Schritte zur Entwicklung des Moduls

Schritt 1: Erstellen Sie eine grundlegende Struktur von Dateien und Ordnern, die für die Entwicklung des benutzerdefinierten Drupal 8 CKEditor-Moduls benötigt werden.

Schritt 2: Definieren Sie die Datei ckeditor_googlesearch.info.yml, um Ihre Drupal-Website über Ihr Modul zu informieren.

name: CKEditor Google Search
type: module
description: Dieses Plugin-Modul fügt die Google-Suchfunktion zu CKEditor in Drupal 8 hinzu
package: CKEditor
dependencies:
  - ckeditor
version: '8.x-1.0'
core: '8.x'
project: 'ckeditor_googlesearch'

Schritt 3: Nun erstellen wir die Plugin-Datei. In diesem Fall können Sie sie als Search.php definieren.

<?php

namespace Drupal\ckeditor_googlesearch\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "Google Search" plugin.
 *
 * @CKEditorPlugin(
 *   id = "googlesearch",
 *   label = @Translation("Google Search"),
 *   module = "ckeditor_googlesearch"
 * )
 */
class Search extends CKEditorPluginBase {

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    if ($library_path = libraries_get_path('googlesearch')) {
      return $library_path . '/plugin.js';
    }
  }

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

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

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

  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    return [
      'googlesearch' => [
        'label' => t('Google Search'),
        'image' => libraries_get_path('googlesearch') . '/icons/googlesearch.png',
      ],
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function isEnabled(Editor $editor) {
  }

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

}

Hier hat die Search-Klasse CKEditorPluginBase erweitert, und da wir das Plugin von der offiziellen CKEditor-Website verwenden, muss es heruntergeladen und in Ihrem /libraries-Ordner der Drupal-Website gespeichert werden. Falls es keinen libraries-Ordner in Ihrem Drupal-Website-Verzeichnis gibt, erstellen Sie einen im selben Verzeichnis, in dem sich Ihre Module- & Themes-Ordner befinden.

Die Struktur wird wie folgt aussehen: [D8-root]/libraries/googlesearch/ (da das Google Search-Plugin den Stammordnernamen „googlesearch“ haben wird)

Nachdem Sie die Drupal 8 CKEditor-Plugins erhalten haben, gehen Sie zur Datei Search.php. Wir müssen Dokumentation zu unserem Plugin hinzufügen, damit Drupal über das Plugin Bescheid weiß. Sie können es durch Kopieren des Codes einfügen:

/**
 * Defines the "Google Search" plugin.
 *
 * @CKEditorPlugin(
 *   id = "googlesearch",
 *   label = @Translation("Google Search"),
 *   module = "ckeditor_googlesearch"
 * )
 */

• id: Name des Stammordners des Plugins (in unserem Fall „googlesearch“).
• label: Offizieller Name des Plugins (in unserem Fall „Google Search“).
• Module: Maschinenname Ihres Moduls (in unserem Fall ckeditor_googlesearch).

Dieses Mal müssen wir Drupal über den Speicherort unserer Plugin-Dateien informieren. Dazu müssen wir die Funktion getFile() wie folgt überschreiben: 
 

public function getFile() {
    if ($library_path = libraries_get_path('googlesearch')) {
      return $library_path . '/plugin.js';
    }
  }

Die Funktion libraries_get_path() gibt den Pfad der angegebenen Bibliothek (in unserem Fall „googlesearch“) zurück oder FALSE, wenn sie nicht verfügbar ist.

Da wir nun einen Button für diese Google-Suchfunktion in unserem Texteditor benötigen, müssen wir die Funktion getButtons() wie folgt überschreiben: 

public function getButtons() {
    return [
      'googlesearch' => [
        'label' => t('Google Search'),
        'image' => libraries_get_path('googlesearch') . '/icons/googlesearch.png',
      ],
    ];
  }

In dieser Funktion müssen wir ein Array „googlesearch“ mit den folgenden Eigenschaften erstellen:

• label: um dem Icon eine Beschriftung zu geben.
• Image: Pfad zur Such-Icon-Datei des Plugins.

Schritt 4: Nun erstellen wir die Datei ckeditor_googlesearch.install

<?php

/**
 * @file
 * Überprüft die Anforderungen für das CKEditor Google Search Modul.
 */

/**
 * Implements hook_requirements().
 */
function ckeditor_googlesearch_requirements($phase) {
  $requirements = [];

  if ($phase == 'install' || $phase == 'runtime') {
    $plugin_detected = file_exists(DRUPAL_ROOT . '/libraries/googlesearch/plugin.js');

    if ($plugin_detected) {
      $requirements['googlesearch'] = [
        'title' => t('CKEditor Google Search'),
        'value' => t('Plugin erkannt'),
        'severity' => REQUIREMENT_OK,
      ];
    }
    else {
      $requirements['googlesearch'] = [
        'title' => t('CKEditor Google Search'),
        'value' => t('Plugin nicht erkannt'),
        'severity' => REQUIREMENT_ERROR,
        'description' => t('Bevor Sie das CKEditor Google Search Modul verwenden können, müssen Sie das googlesearch-Plugin von ckeditor.com herunterladen und in /libraries/googlesearch ablegen. Weitere Informationen finden Sie in der README.txt. <a href=":plugin_url">Holen Sie sich das Plugin hier</a>.', [':plugin_url' => 'https://ckeditor.com/cke4/addon/googlesearch']),
      ];
    }
  }

  return $requirements;
}

Hier implementieren wir hook_requirements(), um zu überprüfen, ob der Plugin-Ordner „googlesearch“ in den libraries-Ordner kopiert wurde oder nicht. Wenn der Plugin-Ordner verfügbar ist, wird das Modul installiert, andernfalls wird ein Fehler generiert, der Sie auffordert, die Plugin-Dateien in das erforderliche Verzeichnis zu legen, wie unten gezeigt:

Diese Implementierung hilft, einen Website-Absturz zu vermeiden, wenn das Modul konfiguriert wird, ohne die Plugin-Dateien abzulegen.

Schritt 5:  In der Datei ckeditor_googlesearch.module implementieren wir hook_help(), um eine Hilfeseite mit Installationsanweisungen und zur Nutzung des Moduls bereitzustellen.

<?php

/**
 * @file
 * Enthält ckeditor_googlesearch.module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function ckeditor_googlesearch_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.ckeditor_googlesearch':
      $output = '';
      $output .= '<h3>' . t('CKEditor Google Search') . '</h3>';
      $output .= '<p>' . t('Das Modul fügt der Editor-Symbolleiste einen Google-Suchbutton hinzu.') . '</p>';
      $output .= '<h3>' . t('Verwendung') . '</h3>';
      $output .= '<dl>';
      $output .= '<dt>' . t('Einstellungen') . '</dt>';
      $output .= '<dd>' . t('Verschieben Sie in den <a href=":text-formats">Textformaten</a>, die CKEditor verwenden, das Google Search-Symbol in die aktive Symbolleiste.', [':text-formats' => \Drupal::url('filter.admin_overview')]) . '</dd>';
      $output .= '</dl>';
      return $output;

    default:
  }
}

Installation & Konfiguration des Moduls

Schritt 1: Nach erfolgreicher Erstellung des Moduls ist es Zeit, es zu aktivieren. Um das Modul zu aktivieren, gehen Sie zum Link: [D8-site]/admin/modules, suchen Sie nach dem CKEditor Google Search Modul und aktivieren Sie das Modul wie unten gezeigt und klicken Sie auf Installieren.

Schritt 2: Nach der Installation des Moduls gehen Sie zum Konfigurationslink: [D8-site]/admin/config/content/formats und wählen Sie eines der Textformate aus, in dem Sie das Tool platzieren möchten. 

Wir werden es für Basic HTML konfigurieren, indem wir den Link besuchen: [D8-site]/admin/config/content/formats/manage/basic_html.

In der Symbolleistenkonfiguration finden Sie das Icon, wie es im Icon-Ordner des Plugins vorhanden ist.

Schritt 3: Ziehen Sie dieses Icon nun in den Bereich der aktiven Symbolleiste, um dieses Tool in Ihrem Editor zu verwenden, wie unten gezeigt:

und es wird im Bereich der aktiven Symbolleiste verfügbar sein, wie unten gezeigt. Klicken Sie auf „Konfiguration speichern“, um die Konfiguration zu speichern

Verwendung des Moduls

1. Gehen Sie nun zu dem Link, wo Sie diesen Editor verwenden werden. Wenn Sie Ihren Texteditor verwenden, sehen Sie das Tool-Icon in der Symbolleiste. 
    
2. Wählen Sie die Wörter aus und klicken Sie auf den Google Search-Button. Eine neue Seite wird im Browser Google geöffnet, die die Suchergebnisse der ausgewählten Wörter wie unten gezeigt präsentiert:

Herzlichen Glückwunsch! 

Sie haben das Modul erfolgreich erstellt und damit die Funktionalität von CKEditor erweitert. 

Im Falle eines Problems können Sie hier zum Modul beitragen. Und im Zweifelsfall können Sie unten kommentieren.