Mit dem CKEditor arbeiten

Funktionen und Nutzung

Der Drupal CKEditor bietet eine Vielzahl von Funktionen, um Inhalte komfortabel zu bearbeiten und zu formatieren. Viele dieser Funktionen sind aus gängigen Textverarbeitungsprogrammen wie Microsoft Word bekannt. Im Folgenden erhalten Sie eine Übersicht über die wichtigsten Werkzeuge und ihre Anwendung.

Absätze & Überschriften

Standardmäßig wird eingegebener Text als normaler Absatz formatiert. Um die Struktur Ihrer Inhalte zu verbessern, können Sie Überschriften (H2 bis H6) verwenden. Die Überschrift H1 ist standardmäßig dem Titel der Seite vorbehalten und kann nicht manuell ausgewählt werden. 

Strukturen und Styles von Überschriften

Die Überschriften, die über das „Absatz“-Menü hinzugefügt werden, sind struktureller Natur. Dies bedeutet, dass in HTML Überschriften Tags von <h1> bis <h6> zugewiesen werden, und die entsprechenden Abschnitte dann in eine Baumstruktur gegliedert werden können. Hier sollten keine Überschriften übersprungen werden, d.h. auf eine Überschrift 1 folgt eine Überschrift 2, usw., ähnlich wie beim Strukturieren eines Aufsatzes.

Generell müssen Sie keine Änderungen an dem Aussehen von Überschriften vornehmen. Dies wird auch hinsichtlich des bestenfalls konsistent bleibenden Designs der gesamten Website empfohlen. Sollte Ihnen jedoch irgendwann rein vom Aussehen her die normale Größe einer Überschrift nicht gefallen, sein sie zu groß, oder zu klein, können Sie diese unter „Stil“ (das Menü direkt rechts daneben), beliebig anpassen.

Stile

Mit der Stil-Funktion lassen sich bestimmte Textbereiche optisch hervorheben. Beispielsweise können Sie Einlesetexte in größerer Schrift darstellen, Badge-Formate anwenden oder spezielle Formate für Listen, oder Tabellen nutzen. Die Stile helfen dabei, Inhalte gezielt zu strukturieren und die Lesbarkeit zu verbessern.

Listen

Listen helfen, Inhalte übersichtlich darzustellen und eine klare Struktur zu schaffen. 

Der CKEditor bietet zwei Arten von Listen:

• Ungeordnete Listen: Diese werden mit Aufzählungspunkten (•) dargestellt.
• Geordnete Listen: Hierbei handelt es sich um nummerierte Listen (1., 2., 3. …)

Die Formatierung der Listentypen kann ebenfalls in „Stile“ angepasst werden, um sie bspw. mit Checkmarks oder Icons zu schmücken.

Zitat

Die Zitat-Funktion hebt fremde oder besonders wichtige Aussagen optisch hervor. Diese Formatierung wird auch in den Layout Builder Blöcken zu Erfahrungsberichten, d.h. Testimonials, verwendet.

Tabelle

Mit der Tabellenfunktion können Sie strukturierte Inhalte in Zeilen und Spalten darstellen. Nach dem Einfügen lassen sich die Spaltenbreite, Zeilenhöhe und Zelleneigenschaften anpassen. Zusätzlich können auch hier Stile auf einzelne Tabellenzellen angewendet werden, um das Design der Tabelle zu optimieren.

Medien

Sie haben die Möglichkeit, diverse Medien, wie Bilder, oder auch Dokumente in den Text einzufügen. 

Für Bilder können Sie folgende Anpassungen vornehmen:

• Bildunterschrift hinzufügen
• Das Bild verlinken – Da ein Bild vom Nutzer inhärent nicht als Link wahrgenommen wird, empfiehlt sich, wichtige Links separat anzugeben
• Die Bildgröße anpassen (z. B. Col 2 bis 9, oder „Container“ für die volle Breite)
• Die Bildausrichtung und Textumfluss definieren

Links & Buttons

Sie können Texte oder Bilder mit Links versehen. Dabei müssen, bzw. können Sie folgende Felder ausfüllen: 

• Linkadresse – Der Link, auf den verwiesen werden soll
• Titel – Der Titel des Links, bitte immer hinterlegen
• CSS-Klassen – Hier können optional CSS-Klassen genutzt werden, um einen Link bspw. wie einen Button aussehen zu lassen
• Link-Beziehung – Muss nicht ausgefüllt werden
• In neuem Fenster öffnen – Bestimmt, ob der Link im selben Tab im Browser, oder in einem neuen geöffnet werden soll

Stylen von Links und Buttons

Akkordeons

Die Akkordeon-Funktion ermöglicht es, längere Inhalte kompakt darzustellen. Nutzer können einzelne Abschnitte ein- oder ausklappen, um sich gezielt bestimmte Informationen anzeigen zu lassen. Für die Darstellung von FAQs sollten der dafür vorgesehene Inhaltstyp „FAQ“, und der gleichnamige Block im Layout Builder genutzt werden.

Vorlagen (Templates)

Mit Vorlagen können Sie wiederkehrende Inhaltsstrukturen schnell und einfach einfügen. Diese vordefinierten HTML-Schnipsel, bzw. Layouts helfen Ihnen, Zeit zu sparen und eine einheitliche Formatierung sicherzustellen. Die Templates können einfach in den Editor übernommen und dann, bspw. in ihren Überschriften und Texten, sowie genutzten Medien, beliebig angepasst werden.

Verfügbare Templates

Name	Details	Aussehen
Bagde List Primary	Eine Liste von Primary Badges
Icon Badge List Primary	Eine Liste von Primary Badges mit anführenden Icons
Badge List Secondary	Eine Liste von Secondary Badges - Ändern ihre Farbe basierend auf dem angewandten Farbschema der Seite
Icon Badge List Secondary	Eine Liste von Secondary Badges mit anführenden Icons - Ändern ihre Farbe basierend auf dem angewandten Farbschema der Seite - Immer dunkle Icons nutzen
Icon List	Eine Aufzählung mit anführenden Icons für jeden Punkt
Panel (Info)	Ein Infomations-Panel für allgemeine Informationen
Panel (Note)	Ein Hinweis-Panel
Panel (Success)	Ein simples Success-Panel
Panel (Warning)	Ein simples Warning-Panel, für wichtige Hinweise
Panel (Danger)	Ein Danger-Panel, für kritische Hinweise

Templates für Info-Boxen

Die folgenden Templates werden in der Regel nur in dem hierfür vorgesehenen Block „Text with Info Box“ verwendet. 

Name	Details	Aussehen
Info Block List	Eine Info-Box mit Überschrift und Aufzählung
Info Block Icon with CTA	Eine Info-Box mit Überschrift, anführenden Icon, erklärendem Text und Link zu weiterführenden Informationen
Info Block List with CTA	Eine Info-Box mit Überschrift und Aufzählung mit anführenden Icons, optionalen weiterführenden Link, und einem Call-To-Action

Arbeiten mit Icons (Medien) in Templates

Insbesondere bei Templates, welche mit Medien, d.h. mit Icons arbeiten, kann es vorkommen, dass eingebettete Medien in einer falschen Farbe, oder gar nicht vorliegen, weil referenzierte Medien eventuell fehlen. Genau wie auch Überschriften und normale Texte können natürlich auch Icons leicht ersetzt werden. 

Gehen Sie hierzu im Editor mit dem Cursor an die jeweilige Stelle, an welcher sich das derzeitige Icon befindet, bzw. befand, sofern es fehlt (hier steht dann „Die referenzierte Medienquelle fehlt und muss neu eingebettet werden.“). Klicken dann in der Optionen-Leite im Editor auf „Medium einfügen“. 

Icons liegen immer im SVG-Format vor, suchen Sie sie also in dem entsprechenden Tab des sich öffnenden Dialogs. Achten Sie außerdem auf die Größe der Icons, damit sie dem Design entsprechen. In der Regel wird zwischen kleinen Icons mit einer Größe von 20x20px, 24x24px oder großen Icons mit einer Größe von 48x48px unterschieden. 

Zudem sollten Sie auf die richtige Farbgebung achten. In Info-Boxen wird generell ein dunkelblaues Icon verwendet. In Secondary Badges hingegen ein dunkelgraues Icon.

Nachdem Sie die richtige Medienquelle ausgewählt, bzw. hochgeladen haben, bestätigen Sie Ihre Auswahl. Sie sollte Ihnen im CKEditor angezeigt werden, sodass Sie nun die alte, eventuell fehlende Quelle entfernen können.

Häufig auftretendes Problem

Beim Entfernen der Icons am Anfang einer Liste des Templates kann die Liste versehentlich Ihr Styling verlieren und plötzlich „kaputt“ aussehen. Die ist kein Problem. Setzen Sie Ihren Cursor einfach in die Liste. Es handelt sich um eine simple Aufzählung, Sie müssen nur über das „Stile“-Menü wieder den richtigen Stil „ul (Icon List)“ hinzufügen.
 

Quellcode-Ansicht

Für erfahrene Nutzer bietet der CKEditor eine Quellcode-Ansicht. Hier können Sie den HTML-Code direkt bearbeiten, um individuelle Anpassungen vorzunehmen. Bitte achten Sie darauf, dass der Code korrekt ist, um Darstellungsfehler zu vermeiden.

Blöcke anzeigen lassen

Diese Funktion erlaubt es, spezielle Inhaltsblöcke innerhalb des Editors zu platzieren. Solche Blöcke können beispielsweise Navigations- oder Informationsmodule enthalten, die in Drupal zentral verwaltet werden.