Wie man eine neue Schaltfläche (Plugin) zu CKEditor hinzufügt, Teil II
In einem unserer vorherigen Artikel haben wir Ihnen gezeigt, wie man CKEditor in Drupal 8 konfiguriert. Die Nutzung der verfügbaren Benutzeroberfläche ist großartig, aber manchmal benötigen Kunden zusätzliche Funktionen. Große Unternehmenswebsites mit Redaktionsteams müssen in der Lage sein, schnell einzigartige Dinge zu erreichen und benötigen deshalb oft benutzerdefinierte Funktionen.
Wir werden demonstrieren, wie Sie die Funktionalität des Editors selbst erweitern können.
In vielen Fällen reichen die grundlegenden Funktionen von CKEditor mehr als aus.
Es gibt jedoch Projekte, bei denen Kunden verlangen, die Funktionalität des Content-Editors zu erweitern.
Mit CKEditor können Sie dies mit Plug-ins tun – alle sind auf der offiziellen Website verfügbar.
http://ckeditor.com/addons/plugins/all
Das Hinzufügen eines neuen Plug-ins zur auf Drupal 8 basierenden Website ist im Vergleich zur früheren Drupal-Version sehr einfach. Alles, was Sie benötigen, ist, ein einfaches Modul zu erstellen.
Als unser Beispiel habe ich ein Plug-in gewählt, das es uns ermöglicht, einen YouTube-Clip mittels Embed-Code oder seiner URL zu veröffentlichen.
Das besagte Plug-in: https://ckeditor.com/cke4/addon/youtube
Erstellen Sie ein Modul mit dem Namen cke_youtube (oder wählen Sie Ihren eigenen Namen).
Die Struktur des Moduls ist wie folgt:
cke_youtube.info.yml-Datei enthält die Standarddaten des Moduls.
cke_youtube.module-Datei ist eine leere PHP-Datei, dort benötigen wir keinen Code.
Die Struktur enthält zwei zusätzliche Verzeichnisse:
Plug-in-Verzeichnis - js.
Dort finden Sie ein weiteres Verzeichnis namens „plugins“.
Entpacken Sie die heruntergeladenen Dateien von https://ckeditor.com/cke4/addon/youtube dort.
Das Erstellen eines neuen Plug-ins in Drupal erfolgt in einer neuen Klassen-Datei, die wir erstellen und dann richtig konfigurieren müssen.
In unserem Fall wird es Youtube.php sein, und die gesamte Struktur muss wie folgt aussehen.
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;
/**
* Definiert das "Youtube"-Plug-in, mit einem CKEditor.
*
* @CKEditorPlugin(
* id = "youtube",
* label = @Translation("Youtube Plugin")
* )
*/
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('YouTube Video hinzufügen'),
'image' => $iconImage,
]
];
}
/**
* {@inheritdoc}
*/
public function getConfig(Editor $editor) {
return [];
}
}
Die Youtube-Klasse verwendet zwei Schnittstellen - CKEditorPluginInterface, CKEditorPluginButtonsInterface
Sehen Sie sich den Kommentar genauer an. Die „id“-Variable muss denselben Namen enthalten wie der Name des Plug-ins, das Sie installieren.
In diesem Fall ist der Name „youtube“.
Bei anderen Plug-ins finden Sie den Namen in der plugin.js-Datei.
Nachfolgend werde ich alle Methoden kurz erläutern und ihre Funktion beschreiben:
getDependencies()
Hier tragen Sie alle Namen der Plug-ins ein, die für das Funktionieren Ihres Plug-ins erforderlich sind.
Wenn sie nicht benötigt werden, lassen Sie die Methode leer, so wie bei unserem YouTube-Plug-in.
Die erforderlichen Plug-ins finden Sie in der plugin.js-Datei.
Beispiel für das Layout Manager-Plug-in:
In diesem Fall müssten Sie zuerst basewidget installieren, und dann layoutmanager hinzufügen.
getLibraries()
Gibt zusätzliche Bibliotheken an.
getFile()
Plug-in-Standort.
getButtons()
Fügt einen neuen Button zum Editor hinzu.
Bitte beachten Sie, dass Sie einen korrekten Namen im Rückgabearray verwenden müssen:
Im Fall dieses Plug-ins ist der korrekte Name „Youtube“.
Den benötigten Namen finden Sie in der plugin.js-Datei.
Wenn die gesamte Struktur und die Namen korrekt sind, können Sie Ihr neues Modul aktivieren.
Gehen Sie zu Erweitern (/admin/modules/)
Gehen Sie nun zu Textformaten und Editor-Konfiguration
Konfiguration → Inhaltsredaktion → Textformate und Editoren (/admin/config/content/formats/)
Fügen Sie einen neuen Button zum Editor für ein ausgewähltes Format hinzu.
Nachdem Sie die Änderungen angewendet haben, fügen Sie neuen Inhalt hinzu und wählen Sie das Textformat, für das Sie gerade den YouTube Video hinzufügen-Button eingerichtet haben.
Wenn alles gut funktioniert, öffnet sich nach einem Klick auf den Button ein Fenster, das es Ihnen ermöglicht, Ihren Embed-Code oder die URL zu Ihrem Clip einzugeben.
