Der besondere Charme von Drupal – Teil 3: WYSIWYG schreiben und Medien verwalten
Die häufigste Aufgabe in einem CMS ist gewöhnlich, Texte und Bilder einzufügen oder zu bearbeiten. Die spartanischen Eingabefelder, die Drupal von Haus aus bereitstellt, erfreuen zwar den Coder, der HTML im Schlaf schreibt. Für alle anderen Redakteure ist es mühsam, Inhalte so in die richtige Form zu bringen.
Installieren wir also einen WYSIWYG-Editor und eine Bilderverwaltung, und Texte schreiben wird ein Vergnügen. Als Bilderverwaltung hat sich IMCE bewährt. Es lässt sich für unterschiedliche Benutzergruppen mit unterschiedlichen Möglichkeiten anpassen und auch als Standard-Dateiverwaltung in den Editor CKEditor integrieren.
Für die Admins unter uns: Zur Installation der Module
IMCE wird – wie alle lokalen Module – in das Verzeichnis sites/all/modules hochgeladen und im Backend von Drupal aktiviert. Der Editor wird aus zwei Quellen heruntergeladen: er besteht aus dem Editor selbst und dem Drupal-Modul, das Einbindung und Konfiguration desselben bereitstellt. Nach dem Entpacken kopiert man die Editordateien aus ihrem Verzeichnis ckeditor in das Modulverzeichnis ckeditor/ckeditor. – Hochladen und aktivieren.
Um den IMCE noch in den Editor einzubinden, müsst Ihr die Konfigurationsdatei des Editors anpacken und diese Zeilen auskommentieren:
//config.extraPlugins += (config.extraPlugins ? ‘,imce’ : ‘imce’ );
//CKEDITOR.plugins.addExternal(‘imce’, Drupal.settings.ckeditor.module_path + ‘/plugins/imce/’);
In der Profil-Konfiguration (z.B. für das Eingabeprofil „Filtered HTML“) über das Backend kann dann der Button für den IMCE einfach in die Liste der Buttonleiste des Editors eingefügt werde: Unter „Editor Appearance“ im Feld Werkzeugleiste ersetzt ihr z.B. Image durch IMCE.
Nochmal für Admins: Editor konfigurieren
Wie die Einbindung der IMCE lässt sich auch die Konfiguration des CKEditor für jedes Eingabeprofil separat festlegen. So könnt Ihr z.B. unterschiedliche Konfigurationen für jede Rolle anlegen: Redakteure bekommen ein Editor-Profil mit IMCE und Flash-Einbindung, Texter erhalten nur eine reduzierte Werkzeugleiste mit wenigen Optionen, die man bei der Textorganisation unbedingt braucht: Überschriften, Listen, Fett und Kursiv.
Zuerst ist es jedoch erforderlich, ein Texteingabeformat zu definieren, das in seinen erlaubten HTML-Elementen den Möglichkeiten des Editors entspricht. Wenn im Textformat keine Bilder vorgesehen sind, kann man sie zwar im Editor einbinden, sie werden aber bei der Ausgabe der Website ausgefiltert. Ein Eingabeformat für den Editor erstellt Ihr unter Konfiguration >> Inhaltserstellung >> Textformate. Dort legt Ihr auch fest, welche Benutzerrollen dieses Format verwenden dürfen. Unter Konfiguration >> Inhaltserstellung >> CKEditor passt Ihr dann den Editor für dieses Eingabeformat an:
- Basic Setup: Zuordnung des Eingabeformats zum Editor
- Security: Einstellung der Filter, die auf den eingegebenen Inhalt angewendet werden sollen. Hier geht es nicht nur um Sicherheit, sondern auch um Bequemlichkeit. So können URLs bei der Eingabe gleich in den entsprechenden Link umgewandelt werden.
- Editor Appearance: Neben der Darstellung des Editors (Skin, Breite, Farben, wegschaltbar) legt man hier die Sprache und – wichtig – die verfügbare Werkzeugleiste fest.
- Cleanup and output: Legt fest, wie harter und weicher Umbruch behandelt und welche Absatzformate verfügbar sein sollen (Font formats). Es ist z.B. für eine semantisch richtige Auszeichnung des Textes sinnvoll, die Überschriften h1 abzuwählen. Hier sollten auch nur Formate erscheinen, die wirklich im CSS definiert sind.
- CSS: Mit dem Editor CSS regelt Ihr die Formatierung der Inhalte im Editor selbst. Noch wichtiger ist das Menü Predefined Styles: Wenn Ihr den Redakteuren eigene Klassen für Block- oder Inline-Formate zur Verfügung stellen wollt, sind diese im Editor unter „Stile“ erreichbar (im Array der Werkzeugleiste ist dies der Wert ‘Styles’). Vordefinierte Stile sind in der Datei sites/all/modules/ckeditor/ckeditor/ckeditor.styles.js angelegt. Um diese Datei an Euren Bedarf anzupassen, legt Ihr eine Kopie im Verzeichnis Eures Templates an und bindet sie mit der Einstellung Predefined styles >>Use theme ckeditor.styles.js in den Editor ein.
- File browser settings: Wählt hier den IMCE aus. Wenn der ckeditor-eigene Dateibrowser verwendet wird, gibt es die Möglichkeit, jedem Benutzer ein eigenes Dateiverzeichnis zuzuweisen.
- Erweiterte Optionen: Die Auswahl Load Method >> ckeditor_basic.js führt dazu, dass der Editor im Frontend erst angezeigt wird, wenn man ihn anfordert (Erstaunlicherweise mit dem Link Switch to plain text editor). Das spart Ladezeit, ist aber für den Redakteur nicht unbedingt transparent. Interessant ist noch die Option Spell checker. Hier kann man die rechtschreibprüfung beim Tippen zuschalten. Force pasting as plain text bewirkt, dass in den Editor kopierter Text von allen Tags befreit wird.
Mit dem Editor Texte schreiben
Jetzt geht es zur Sache: Was hat der CKEditor dem Redakteur zu bieten? Betrachten wir die Werkzeugleiste mit allen Optionen. Für den realen Betrieb sollte die Administratorin diese Optionen auf das notwendige Minimum beschränken. So arbeitet der Redakteur in einer auf seinen Bedarf optimierten Umgebung:
- Quellcode: Umschalten zum Quellcode. Die letzteRettung, wenn mal etwas schiefgeht.
- Ausschneiden, Kopieren, Einfügen, als Text einfügen, aus MS Word einfügen: Die klassischen Optionen für Copy and Paste. Wobei man sich beim Einfügen aus Word nicht darauf verlassen sollte, dass der Code wirklich sauber ist. Wer sicher gehen will, kopiert vorher Texte aus Word in einen reinen Texteditor oder fügt sie in der Quellcode-Ansicht ein.
- Rechtschreibprüfung: Hier kann der Text als Ganzes oder während der Eingabe überprüft werden.
- Rückgängig, Wiederherstellen, Suchen, Ersetzen: Das kennt man von der Textverarbeitung seiner Wahl.
- Flash, Tabelle einfügen, Horizontale Linie einfügen, Smiley, Sonderzeichen: Hier kann man ein Flash in die Medienverwaltung hochladen und einbinden, eine Tabelle, Linie, Smileys und Sonderzeichen aus einer Liste einfügen. Zur Tabelle: eingefügte Tabellen lassen sich später über ein Kontextmenü um Spalten und Zeilen erweitern.
- Maximieren, Blöcke anzeigen, IMCE: Blöcke anzeigen unterstützt optisch, man kann die Gliederung des Dokuments sehen.
- Format: Absatzformate
- Stil: vordefinierte Absatz- und inline-Formate
- Fett, kursiv, unterstrichen, durchgestrichen: kennt Ihr auch von Eurer Textverarbeitung. Ebenso diese Formate:
- Tiefgestellt, hochgestellt
- Nummerierte Liste, Liste
- Einrücken, ausrücken, Anführungszeichen
- Linksbündig, zentriert, rechtsbündig, Blocksatz
- Leserichtung von links nach recht, Leserichtung von rechts nach links: Diese Anpassung eignet sich für fremdsprachige Texte und wirkt sich auf die Textausrusrichtung der Absätze aus.
- Link erstellen/editieren, Link entfernen, Anker anlegen: Hier ghibt es alle Funktionen rund um Links. Leider muss man websiteinterne Links immer noch hart codieren. Das kann TYPO3 besser.
Bilder verwalten mit dem IMCE
Der IMCE bietet dem Redakteur viele Möglichkeiten, Bilder zu verwalten und in den Text einzubinden.
Die Übersicht des Bilderverzeichnisses gibt alle nötigen Informationen zu den hochgeladenen und erzeugten Bildern (Datum, Maße, Größe). Die Behandlung der Bilder ist komfortabel:
- Upload: Hier ladet Ihr die Bilddatei hoch. Optional können auch gleich kleinere quadratische Versionen des Bildes erstellt werden.
- Thumbnails: Das geht auch noch nachträglich. Ein Bild auswählen und dann Thumbnails erstellen lassen.
- Löschen: für überflüssige Bilder.
- Größe ändern: Neben quadratischen Thumbnails lassen sich auch skalierte Versionen eines hochgeladenen Bildes erstellen. Das Ausgangsbild wird je nach Wahl überschrieben oder es wird ein neues (kleineres) Bild erzeugt.
- Insert File: Hier gibt es alle Optionen, ein Bild aus der Mdienverwaltung in den Editor einzufügen (Alternativtext, Title, Verlinkung, Klassen). Klassen sollte die Administratorin vorher angelegt haben, sonst wirken sie sich nicht aus.
- Einmal in den Text eingebundene Bilder lassen sich nachträglich über ein Kontextmenü (rechte Maustaste) bearbeiten oder entfernen.
Fazit
Mit CKEditor und IMCE steht den Benutzern, die an der Website arbeiten, ein mächtiges Werkzeug zur Textverarbeitung zur Verfügung. Durch umfangreiche und granulare Konfigurationsmöglichkeiten kann dieses Tool an die Bedürfnisse der jeweiligen Benutzergruppe angepasst werden. Die hier vorgestellte Kombination ist nicht die einzige Möglichkeit, Texte komfortabel einzugeben. Das Modul Wysiwyg erlaubt z.B. die Einbindung verschiedener Editoren. Wer lieber TinyMCE benutzt, wird hier fündig. Für die meisten Ansprüche genügt allerdings die hier vorgestellte Kombination.
vg Jörg
RSS