CKEditor Plugins in Drupal 8 installieren/registrieren

Gewusst wie, ist es mit CKEditor Plugins in Drupal 8 fast so einfach wie in Drupal 7

Drupal 8 release ist mittlerweile schon längere Zeit am Markt und die meisten Module und Funktionalitäten sind ausgereift, um mit einem Versuch in Drupal 8 zu starten. Da in Drupal 8 der CKEditor für die komfortable Textbearbeitung bereits seriemäßig enthalten ist, hat sich auch das Verwalten von Plugins zu Drupal 7 verändert. Nach unseren ersten Versuchen, die eigene Plugins hinzuzufügen um zu aktivieren, sind wir beinahe verzweifelt. Aber mit etwas Recherche und getüftel sind wir doch zum Ziel gekommen :-) In den folgenden Schritten möchten wir dir kurz erläutern, wie auch du CKEditor Plugins in Drupal 8 registrieren bzw. verwenden kannst.

CKEditor Plugin herunterladen

Wir demonstrieren es in folgendem Beispiel mit dem DIV Container Manager. Zunächst lädst du dir unter http://ckeditor.com/addon/div das Plugin herunter. Nun entpackst du das Plugin in den Ordner /libraries, welcher sich im Root-Verzeichnis deiner Drupal 8 Installation befinden sollte. Wenn nicht => anlegen.

 

1. Ein Modul für das Plugin anlegen

Es genügt dem Editor leider nicht, einfach nur das Plugin in ein Verzeichnis abzulegen. Daher müssen wir dem Editor nun beibringen, dass er das Plugin registrieren soll. Dies lösen wir über ein kleines eigenes Modul.

  • Du wechselst in das Verzeichnis /modules und legst einen neuen Ordner ckeditor_div an
    • In diesem Verzeichnis erstellst du eine neue Datei namens ckeditor_div.module. Diese Datei enthält ausschließlich nur ein öffnendes php tag (<?php)
    • Auch legst du folgende Ordner in der Reihenfolge an
      • src
        • Plugin
          • CKEditorPlugin
    • Danach erstellst du die Datei ckeditor_div.info.yml und füllst sie mit
name: CKEditor Div Container Manager 
type: module 
description: Adds a Div toolbar button. 
core: 8.x 
package: CKEditor 
dependencies: 
  - ckeditor

Danach speicherst du alle Dateien.

 

2. Das Plugin installieren

  • In der zuvor erstellten Ordnerhierarchie legst du nun eine neue PHP-Datei namens Div.php an
  • Diese Datei hat folgenden Inhalt (welches du übrigens als Template für andere Plugins verwenden kannst)
    • Wichtig: Achte darauf, die richtige plugin class, plugin ID und den richtigen button name zu setzen
<?php

namespace Drupal\ckeditor_div\Plugin\CKEditorPlugin;

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

/**
 * Defines the "div" plugin.
 *
 * NOTE: The plugin ID ('id' key) corresponds to the CKEditor plugin name.
 * It is the first argument of the CKEDITOR.plugins.add() function in the
 * plugin.js file.
 *
 * @CKEditorPlugin(
 *   id = "div", // Die ID des Plugins, zu finden in der plugin.js, direkt bei CKEDITOR.plugins.add(...
 *   label = @Translation("Create Div Container")
 * )
 */
class Div extends CKEditorPluginBase { // Die class ist quasi frei wählbar

  /**
   * {@inheritdoc}
   *
   * NOTE: The keys of the returned array corresponds to the CKEditor button
   * names. They are the first argument of the editor.ui.addButton() or
   * editor.ui.addRichCombo() functions in the plugin.js file.
   */
  public function getButtons() { 
    // Make sure that the path to the image matches the file structure of
    // the CKEditor plugin you are implementing.
    return [
      'CreateDiv' => [ // dies ist der button name und dieser korrespondiert zum Plugin button name, zu finden in der plugin.js bei editor.ui.addButton( ...
        'label' => t('Create Div Container'),
        'image' => libraries_get_path('div') . '/icons/creatediv.png' // Pfad des libraries-Verzeichnis

      ],
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    // Make sure that the path to the plugin.js matches the file structure of
    // the CKEditor plugin you are implementing.
    return libraries_get_path('div') . '/plugin.js'; // Pfad des libraries-Verzeichnis
  }

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

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

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

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

}

 

3. Modul aktivieren und CKEditor konfigurieren

Nachdem du das Modul ckeditor_div aktiviert hast, navigierst du zu Verwaltung > Konfiguration > Inhaltserstellung > Textformate und -editoren und editierst dein Textformat – in unserem Fall HTML. Nun sollte das neue Icon sichtbar sein.

Das wars! So einfach funktioniert es letztendlich.

PS: If your button is not visible while editing a node but it is visible in the configuration file, that means that the value you have on the getButtons() function doesn't match with the values from plugin.js. This got me back and forth for a while.

Anmerkung: Falls der Button während du den Content editierst nicht sichtbar ist, jedoch in der Konfiguration des CKEditors, bedeutet dies, dass die gesetzten values in der getButtons() Funktion nicht mit den values der plugin.js übereinstimmen. Unbedingt prüfen!

Text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.

Meinungen und Kommentare

Absolut NEUES Update des SEO / SMM-Pakets "XRumer 16.0 + XEvil 4.0":
Captchas Lösen von Google, Facebook, Bing, Hotmail, SolveMedia, Yandex,
und mehr als 8400 andere Größen-Arten von Captcha,
mit höchster Präzision (80,100%) und höchster Geschwindigkeit (100 img pro Sekunde).
Sie können XEvil 4.0 mit allen gängigen SEO / SMM-Software verbinden: XRumer, GSA SER, ZennoPoster, Scrapebox, Senuke und mehr als 100 anderer Software.

Interessiert? Es gibt viele impressive Videos über XEvil in YouTube.
Viel Glück!

http://XEvil.net/

virgin casino online <a href="https://online-casino.fun/">casino bonus</a> paradise casino <a href="https://online-casino.fun/">zone online casino vegas world</a> | https://online-casino.fun/ - online casino real money https://online-casino.fun/ - treasure island casino minnesota

slots for real money <a href="https://online-casino.fun/">casinos near me</a> jackpot party casino <a href="https://online-casino.fun/">online casino real money</a> | https://online-casino.fun/ - online casino gambling https://online-casino.fun/ - foxwoods casino online

Tach

hab alles genauso gemacht, wie es auf der Seite steht... Erhalte aber eine Blankpage wenn auf die Editor gehe...

Hallo,

ich habe auch probleme und ähnliche Probleme wie Jonas. Nachdem ich alles so wie beschrieben ausgeführt habe, blieb die Seite leer.

Hallo, ja ich habe alle Pfade korrekt angegeben.

Bild des Benutzers florian

Hallo Jonas,

sind auch alle Pfade korrekt angegeben? Evtl. ein "/" vergessen? Wird ein Fehler in der Konsole ausgegeben, wenn ja welcher?

Hallo,

vielen Dank für das Tutorial, ich habe alles wie sie es beschrieben haben ausgeführt, wenn ich jedoch dann den Button hinzufügen möchte, kommt eine leere Seite und zudem kann ich keinen Content erstellen.

LG

Bild des Benutzers florian
Erstellt von florian
13.07.2017 - 17:53
8 Kommentare

Aus der Kategorie

Drupal