CKEditor in Drupal 8 Neue Optionen konfigurieren pt. I

12.12.2017

Was ist der CKEditor?

CKEditor ist einer von vielen visuellen HTML-Editoren. Er ermöglicht es Ihnen, Text einfach über eine Benutzeroberfläche einzugeben, die Editoren wie OpenOffice ähnelt.
Er erleichtert die Textformatierung durch eine Reihe von Schaltflächen, die unter anderem für Aufgaben wie:

Ändern der Schriftart,
Schriftgröße,
Einfügen eines Bildes,
Erstellen von Listen,
und viele andere dienen.

Der CKEditor ist der Standard-Texteditor in Drupal 8. Sie müssen keine Bibliotheken oder Module hinzufügen, um ihn zu verwenden. Der CKEditor ist großartig, weil er die Redakteure befähigt. Dank ihm können sie das Markup ihrer Drupal-Websites verwalten und müssen ihre Drupal-Agentur nicht darum bitten, es für sie zu tun.

Das Bild zeigt den aktivierten CKEditor im Formular zur Texterstellung
Aktivierter Editor im Inhaltsformular

Standardmäßig ist der Editor für zwei Texteinfügeformate aktiviert:

Basis-HTML,
Voll-HTML.

Sie unterscheiden sich in der Anzahl der aktivierten Textformatierungsoptionen. Dies fällt Ihnen auf, wenn Sie das Format beim Hinzufügen von Inhalten ändern.
Die Textformatierungsoptionen und die Sichtbarkeit des Editors, abhängig vom ausgewählten Filter oder der Benutzerrolle, sind vollständig konfigurierbar.
Die Editor-Einstellungen befinden sich auf der Seite
Konfiguration → Inhaltsautoren → Textformate und Editoren

Der Pfad zu den Editor-Optionen und einige der Optionen, die geändert werden können

Standardmäßig kann jeder angemeldete Benutzer den CKEditor verwenden, indem er den "Basis-HTML"-Filter aktiviert.
Der "Voll-HTML"-Filter ist nur für Administratoren der Seite reserviert.
Mit jedem editoraktivierten Filter haben Sie die Möglichkeit, Werkzeugoptionen zu konfigurieren.
Unten finden Sie die Optionen für "Basis-HTML".

Hier sehen Sie die Option "Texteditor", die einen umfangreichen Editor für dieses Textformat aktiviert oder deaktiviert.
Im Abschnitt "Rollen" sind die Rollen der Benutzer definiert, die dieses Format verwenden können.
Der Abschnitt "WERKZEUGLEISTENKONFIGURATION" ist verantwortlich für das Aktivieren und Deaktivieren von Optionen im CKEditor.
"Verfügbare Schaltflächen" geben an, welche Schaltflächen im CKEditor verfügbar sind (außer denen, die bereits hinzugefügt wurden).
"Aktive Werkzeugleiste" ist ein Abschnitt mit aktivierten Schaltflächen.
Durch einfaches Drag-and-Drop können Sie zusätzliche Optionen aktivieren. Bewegen Sie einfach die Schaltfläche vom Abschnitt "Verfügbare Schaltflächen" zur "Aktiven Werkzeugleiste". Nun müssen Sie nur noch die Einstellungen speichern.

Verwendung des Editors

Fügen Sie der Seite einen neuen Artikel hinzu.
Inhalt -> Inhalt hinzufügen -> Artikel.
Im Textfeld sollten Sie den Texteditor für das "Basis-HTML"-Datenformat sehen können.

Einige Schaltflächen des Basis-HTML-Editors sichtbar, CKEditor aktiviert

Wenn Sie das Textformat auf "Voll-HTML" ändern, sehen Sie wahrscheinlich mehr Editor-Optionen.
Zusätzlich zu den Standardoptionen, wie Fett- oder Kursivschrift, haben Sie auch die Möglichkeit, ein Bild einzufügen, indem Sie es auf dem Server der Seite hinzufügen.

Erweiterter Editor mit geöffneter Option zum Hochladen von Bildern.

Unten sehen Sie ein Beispiel für Inhalt mit einem Text, einem Link und einem Bild.
Im Editor sehen Sie sofort, wie es aussehen wird, nachdem der Inhalt gespeichert wurde (daher der Name solcher Editoren – WYSIWYG – What You See Is What You Get).

Beispiel für Text, Link und Bild – in diesem Fall ein Sportwagen – erstellt mit CKEditor.

Jede Schaltfläche generiert einen HTML-Code, der, sobald der Inhalt gespeichert ist, auf der Seite platziert wird.
Das obige Beispiel hat etwas Ähnliches generiert wie dies:

<p><em><strong>Dies ist ein Beispieltext. </strong></em><a href="https://drupal.org">Mit Link.&nbsp;</a></p>

<p>Und Bild</p>
<img alt="img" data-align="center" data-entity-type="file" data-entity-uuid="bae745ac-f47d-4426-84cd-9d319f8403f1" src="/sites/default/files/inline-images/DBten-web-news.jpg" />
<p>&nbsp;</p>

Benutzerdefiniertes Textfeld mit dem CKEditor

In Drupal können Sie einfach neue Inhaltstypen erstellen und Felder zu ihnen hinzufügen.
Am Beispiel des vorhandenen Inhaltstyps – des Artikels – wird gezeigt, wie Sie ein Feld hinzufügen können, das automatisch den erweiterten Texteditor verwendet.
Die Seite Struktur -> Inhaltstypen

Definierte Inhaltstypen im Editor. Roter Pfeil markiert eine Schaltfläche, die eine Option zum Verwalten von Feldern bietet

Durch Klicken auf "Felder verwalten" können Sie Ihre eigenen Felder für den gewählten Inhaltstyp hinzufügen.

Eine Schaltfläche, die dem Benutzer ermöglicht, neue Feldtypen hinzuzufügen.

Wählen Sie Text (formatiert, lang) als Feldtyp
Es fügt ein mehrzeiliges Textfeld hinzu.

Ein neues Feld hinzufügen. Oben beschriebene Option ist eingestellt

Nach dem Speichern aller Optionen werden Sie feststellen, dass der Editor für dieses Feld automatisch aktiviert ist.

Und das war es, Sie müssen nur das Feld speichern, um es verwenden zu können.

Erweiterung der Fähigkeiten des CKEditors in Drupal 8

Es gibt viele Module, die neue Funktionen für den CKEditor einführen.
Einige davon sind unten beschrieben, und hier finden Sie die gesamte Liste der Module, die den CKEditor erweitern.

Editor Advanced Link
Ein umfangreiches Dialogfeld zur Erstellung von Links.
Ermöglicht die Definition von Attributen wie:

Titel
Klasse
ID
Ziel

Editor File Upload

Es ermöglicht Ihnen, direkt Dateien hochzuladen und sie im Text zu verlinken.

LinkIt
Bietet eine einfache Benutzeroberfläche zum Erstellen von internen und externen Links. Sie können intern verlinken, z. B. durch ein Autocomplete-Feld, das nach Links anhand der Titel von Inhalten sucht, die dem System hinzugefügt wurden.