CKEditor in Drupal 8 benutzerfreundlich gestalten – Teil 1

Linkit Dialog

Linkit Dialog

Wenn du einmal mit WordPress gearbeitet hast und dann wieder den Standard Editor (CKEditor) in Drupal 8 siehst, dann wünscht du dir schon die eine oder andere Verbesserung.

In diesem Artikel stelle ich ein paar Module vor, die die Funktionalität des Editors zumindest an WordPress annähern. Fairerweise muss ich sagen, dass der CKEditor komplett konfigurierbar ist und mit viel Zeit und Liebe atemberaubende Sachen möglich sind, die wiederum bei WordPress nicht so ohne weiteres funktionieren. Da Zeit und Liebe allerdings extrem knappe Ressourcen bei der Webentwicklung sind, hier ein paar Tipps zum Link Dialog.

In einem weiteren Blogeintrag werde ich dann zum Thema Einfügen und Verwalten von Bildern ein paar Module vorstellen, aber zunächst zu den Links.

CKEditor

Der CKEditor ist ein WYSIWYG Editor, der im Drupal Core enthalten ist. In Drupal gibt es unterschiedliche Eingabeformate, die du unterschiedlichen Benutzerrollen zuordnen kannst. Die Autoren benötigen beispielsweise mehr Funktionalität als die Besucher, die einen Kommentar schreiben. Manche Benutzerrollen benötigen einen WYSIWYG Editor, manche nicht. Standardmässig kommt Drupal mit vier Formaten, von denen zwei den CKEditor (Basic HTML, Full HTML) enthalten.

Drupal 8 - CKEditor mit Basic HTML Format
Drupal 8 – CKEditor mit Basic HTML Format
Drupal 8 - CKEditor - Format Full HTML
Drupal 8 – CKEditor mit Full HTML Format

Bei der Konfiguration des Formats werden die für den Benutzer nutzbaren Icons dem jeweiligen Format per Drag and Drop zugeordnet (/admin/config/content/formats).

CKEditor Toolbar Konfiguration
CKEditor Toolbar Konfiguration

Zusätzliche Module können die Funktionalität, die hinter einem Icon steckt, ändern oder auch neue Funktionen zur Verfügung stellen.

Links setzen

Um einen Link zu setzen, schreibst du normalerweise einen Text, markierst die Worte, die verlinkt werden sollen und klickst auf das Link Icon. Bei WordPress erscheint dann im Text ein Feld, in dem du deinen Link eintragen kannst und nach einem Klick auf das Zahnrad daneben ein erweitertes Link einfügen/ändern Fenster, in dem du auch auf bestehende Inhalte verlinken kannst.

WordPress - Link Dialog
WordPress – Link Dialog

Wenn man das WordPress System ein paar mal genutzt hat, kann man sich das gar nicht mehr anders vorstellen :).
Der Standard Drupal Dialog sieht so aus, dass du nur manuell eine URL eingeben kannst.

Drupal 8 - CKEditor Link Dialog
Drupal 8 – CKEditor Link Dialog

Drei Module erweitern diesen Dialog

CKEditor Entity Link

Lade und installiere das Modul und füge einem Eingabeformat das entsprechende Icon hinzu (admin/config/content/formats).

Entity Link Icon
Entity Link Icon

Drupal besteht aus Entitäten (Content, Comments, Users, Files, …). Dem Entity Link Modul muss gesagt werden, welche Entitäten verlinkbar sein sollen (admin/config/content/ckeditor_link).

CKEditor Entity Link settings
CKEditor Entity Link settings

Wenn du nun etwas verlinken willst, musst du den Entity Typ angeben und kannst dann aus bestehenden Entitäten auswählen.

Entity Link hinzufügen
Entity Link hinzufügen

Das ist schon mal super, aber:

  • Der Nutzer weiss normalerweise nicht, was eine Entität ist
  • Es gibt zwei Icons für Links und das führt zur Verwirrung

Das Modul eignet sich also eher für Spezialfälle.

Linkit

Das Linkit Modul macht es in dieser Hinsicht besser, denn es erweitert das bestehende Link Icon um die erwartete Funktionalität. Die durchsuchbaren Entitäten werden in einem eigenen Profil verwaltet. Das Standard Profil durchsucht erstmal alles (admin/config/content/linkit). Im Eingabeformat muss Linkit aktiviert werden und das Linkit Profil ausgewählt werden. (config/content/formats/manage/basic_html).

Linkit Konfiguration
Linkit Konfiguration

Nun gibt es nur noch ein Link Icon im Editor und der Dialog sieht auch gut aus.

Linkit Dialog
Linkit Dialog

Jetzt fehlen noch erweiterte Parameter …

Editor Advanced Links

Dieses Modul erweitert den Link Dialog um weitere Funktionen. Es arbeitet in der englischen Sprachversion problemlos mit Linkit zusammen, in der deutschen Version scheinen noch Übersetzungen zu fehlen.

Damit es funktioniert, muss im gewünschten Eingabeformat der Filter Limit allowed HTML tags and correct faulty HTML aktiviert sein. In den erlaubten Tags müssen die Tags <title>, <class>, <id>, <target> und/oder <rel> hinzugefügt werden.

Advanced Link Konfiguration
Advanced Link Konfiguration

Der Link Dialog bietet nun eine Möglichkeit auf vorhandene Artikel zu verlinken und hat auch einige Zusatzfunktionen.

Advanced Link Dialog
Advanced Link Dialog

Fazit

Auch wenn es zugegebenermaßen eine Herausforderung ist, Drupal benutzerfreundlich zu gestalten, es ist möglich 😉


tl;dr: In Drupal 8 lässt sich der Editor benutzerfreundlich gestalten.

 

Save

Save

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Ein Gedanke zu „CKEditor in Drupal 8 benutzerfreundlich gestalten – Teil 1“

Kommentar verfassen