Auf- und Zuklappen von Textteilen – diesmal mit Beschreibungslisten und einem WYSIWYG-Editor

Pragmatische Lösungen für Benutzerwünsche in Projekten ja sind immer gefragt. Als es neulich hier im Blog um das Auf- und Zuklappen von Textteilen mit einfachen HTML 5 Befehlen ging, stellte sich prompt die Frage:

„Das ist ja ein super Feature, aber wie implementieren wir das in den WYSIWYG-Editor? Die Menschen wollen keinen HTML-Code bearbeiten!“.

beliebiges Projektmeeting 🙂

Im konkreten Fall ging es um den WYSIWYG Editor CKeditor. Der CKEditor ist ein freier Editor, den man in Webanwendungen integrieren kann. In Drupal ist er der Standard-Editor und wird bereits im Core mitgeliefert.

In Meetings sind immer so Situationen, in denen du merkst: „Ok – sie wollen (immer noch) nichts mit HTML zu tun haben und brauchen eine pragmatische Lösung“.

Natürlich könnte man nun lange darüber diskutieren, wie toll dieses HTML5 ist, und wie wichtig es ist, dass alle Menschen diese Auszeichnungssprache verstehen und auch selbst benutzen. Allein, in der konkreten Situation hilft es vermutlich nicht weiter.

Plan B – Beschreibungslisten mit den HTML-Tags dl, dt und dd

Bereits drei Versionen vor HTML 5 konnten Textteile aufgeklappt werden. Seit HTML 2 gibt es die dl, dt und dd Tags. Dabei geht es prinzipiell um eine Liste mit Beschreibungen, bespielsweise eine todo-List oder eine Liste von Anmerkungen. Das HTML Tag dl (Definition List) leitet so eine Liste ein, dt (Definition Term) leitet den Begriff ein und dd (Definition Description) enthält die Erläuterung des Begriffes. Das Ganze ist ein wenig unübersichtlich und der Sinn der Strukturierung erschliesst sich vielleicht nicht auf Anhieb.

Der HTML-Code für ein dl/dt/dd Konstrukt sieht so aus (Quelle SELFHTML Beschreibungslisten):

<dl> 
 <dt>Punkt 1</dt>
  <dd></dd> 
 <dt>Punkt 2</dt>
  <dd>wird hier definiert</dd>
 <dt>Punkt 3</dt>
  <dd>gibt es in einer folgenden Zeile</dd>
  <dd>Folgeerläuterung 1</dd>
  <dd>Folgeerläuterung 2</dd>
  <dd>...</dd>
 <dt>Punkt 4</dt>
  <dd>ohne Erläuterung</dd>
</dl>

Das Ergebnis sieht recht unspektakulär aus:

Punkt 1

Punkt 2

wird hier definiert

Punkt 3

gibt es in einer folgenden Zeile

Folgeerläuterung 1

Folgeerläuterung 2

…

Punkt 4

ohne Erläuterung

Auch wenn die Liste als Ergebnis sehr einfach aussieht, hat sie jedoch den grossen Vorteil, dass nun eine HTML-Struktur vorliegt, auf die man mit CSS und JavaScript Einfluss nehmen kann. Zum Beispiel könnte man ja den dd-Teil nur unter bestimmten Bedingungen sichtbar machen und den dt-Teil als Überschrift formatieren.

Und wem nun schon eine gewisse Ähnlichkeit zu aufklappbaren Texten aufgefallen ist, der liegt nicht falsch.

Drupal Modul Tabber und Akkordion

Der CKEditor ist der Standard-WYSIWYG-Editor in Drupal-Core und es gibt viele Möglichkeiten diesen Editor zu konfigurieren.

Die Drupal Module Tabber und Accordion verfolgen genau diesen Ansatz. Sie stellen ein zusätzliches Icon für den CKEditor zur Verfügung. Durch einen Klick auf dieses Icon wird eine dl/dt/dd-Struktur im Editor eingefügt, die sich dann einfach verändern lässt.

Das Verhalten des Akkordeons kann konfiguriert werden. Das Standardverhalten ist, dass ein Akkordeon-Teil wieder geschlossen wird, wenn ein anderes geöffnet wird. Es gibt jedoch auch die Möglichkeit, alle Teile zunächst zugeklappt zu zeigen und die einzelnen Akkordeon-Teile offen zu halten, wenn ein anderes geöffnet wird. Die Einstellungen gelten für die gesamte Website.

Neben dem CKEditor Icon bringt das Accordion Modul eine CSS-Datei mit, die das Design steuert.

Das Tabber-Modul funktioniert genauso, aber als Darstellung werden Tabs gewählt!

Der HTML-Text sieht bei Accordeon und Tabber gleich aus:

<dl class="ckeditor-tabber">
 <dt>Tab title 1</dt>
  <dd><p>Tab content 1.</p></dd>
 <dt>Tab title 2</dt>
  <dd><p>Tab content 2.</p></dd>
 <dt>Tab title 3</dt>
  <dd><p>Tab content 3.</p></dd>
</dl>

Ob letztlich ein Akkordeon oder Tabs entstehen, entscheidet sich durch die Verwendung einer entsprechenden CSS-Klasse im dl-Tag (ckeditor-tabber oder ckeditor-accordion).

Das alles bleibt der Benutzer:in jedoch verborgen, solange sie in der WYSIWYG-Ansicht arbeitet.

Aber geht das nicht prinzipiell auch mit Details- und Summary-Tags?

Genau diese Frage stellte ich mir auch und fand das CKeditor Details Accordion Modul. Die HTML-Struktur wird ebenfalls durch einen Klick auf ein Icon erzeugt. In diesem Fall bedarf es allerdings keiner zusätzlichen CSS- und JavaScript-Datei.

Wie kommen die Icons in die Editorleiste?

Drupal benutzt konfigurierbare Textformate. Hier im Beispiel habe ich das Format „Vollständiges HTML“ erweitert.

Ich habe eine neue Icon-Gruppe erstellt und die drei Icons einfach aus „verfügbare Buttons“ in die „Aktive Werkzeugleiste“ gezogen (siehe Screenshot). Die drei neuen Icons erscheinen nach der Installation und Aktivierung der Module automatisch im Bereich „Verfügbare Buttons“.

Fazit

Es ist wichtig einen Plan B und manchmal auch einen Plan C zu haben und vor allem, zeigen zu können, wie alles funktioniert und zusammenhängt. In diesem Fall hat sich die Kund:in für die dl/dt/dd-Variante entschieden, weil die Gestaltung (CSS) wichtig war und die Texte, die damit formatiert werden sollten, semantisch eher längere Beschreibungslisten waren. Trotzdem gibt es jetzt auch das Details-Icon im Editor, weil auch Textteile gefunden wurden, die sich für diese Variante eignen.

Es ist nach wie vor schwierig „normale“ Menschen für das Arbeiten mit Textauszeichnungssprachen wie HTML zu begeistern. Visuelle Editoren sind da kaum zu schlagen. In diesem, sicher speziellen Fall, haben wir aber alle etwas gelernt und ich vermute, die Angst für dem Quelltext hat ein wenig nachgelassen 🙂

tl;dr: Mit HTML-Beschreibungslisten lassen sich auch Akkordeons und sogar Tabs erstellen.