8.3 WYSIWYG Editoren erleichtern Benutzern das Leben

Verfasst von Hagen Graf am Mo, 2008-07-28 09:55

Ein What You See Is What You Get-Editor kommt bei den Benutzern Ihrer Website immer gut an. Die Open Source-Projekte TinyMCE1 und FCKeditor2 werden oft für Content Management Systeme eingesetzt, und auch Drupal verfügt über entspechende Module, um diese Editoren zu verwenden. Das Prinzip ist bei beiden Projekten gleich:

Beide Editoren sind sich von der Leistungsfähigkeit her ebenbürtig. Die Entscheidung, welchen Editor man nimmt, ist in meinen Augen eher eine Gewöhnungs- und Geschmackssache.

In diesem Kapitel zeige ich Ihnen ausführlich, wie der TinyMCE-Editor installiert wird. Den FCKeditor können Sie danach spielend allein installieren. Beide Editoren können im System verbleiben. Sie können beide ausprobieren und sich dann für einen entscheiden.

  • Sie benötigen zum einen den Quellcode des Editors.

  • Zum anderen müssen Sie ein Drupal-Modul, mit dem Sie die Konfiguration und die Berechtigungen vornehmen können, installieren.

Beide Editoren sind mit einem Dateimanager kombinierbar (IMCE-Modul), der es Ihren Benutzern erlaubt, Bilder über den Editor hochzuladen und automatisch klein rechnen zu lassen. Diese Bilder werden in einem eigenen Ordner pro Benutzer abgespeichert und können später von diesem Benutzer in anderen Inhalten wiederverwendet werden.

8.3.1 TinyMCE-Editor

Um den TinyMCE-Editor installieren zu können, benötigen Sie den Programmcode des Editors und das korrespondierende Drupal-Modul. Nach der Installation müssen Sie Berechtigungen vergeben und Benutzerprofile erstellen.

Schritt 1 – Installation des Drupal-Moduls TinyMCE

Laden Sie sich zunächst das Drupal-Module TinyMCE von der CD oder der Projektseite3. Entpacken Sie die Datei tinymce-6.x-1.1-dev.tar.gz in das Verzeichnis /sites/all/modules (Abbildung 8.14).

Speicherort des TinyMCE-Drupal-Moduls
Abbildung 8.14: Speicherort des TinyMCE-Drupal-Moduls

Schritt 2 – Installation des Editors TinyMCE

Jetzt benötigen Sie den eigentlichen TinyMCE-Editor. Sie finden Sie das Dateipaket auf der CD und natürlich auf der Projektseite von TinyMCE, und zwar auch als ganz normale ZIP-Datei4:

  • Entpacken Sie die Datei tinymce_3_0_9.zip in das TinyMCE-Modulverzeichnis.

Sie haben danach zwei Ordner mit dem Namen TinyMCE (Abbildung 8.15), was zwar ein bisschen seltsam aussieht, aber völlig in Ordnung ist:

Speicherort des TinyMCE-Editors
Abbildung 8.15: Speicherort des TinyMCE-Editors

Schritt 3 – Aktivierung des Moduls und Setzen der Berechtigungen

Unter Verwalten – Strukturierung – Module finden Sie einen neuen Eintrag. Aktivieren Sie dort das Modul TinyMCE und speichern Sie Ihre Wahl ab. Anschließend sollten Sie unter Verwalten – Benutzerverwaltung – Berechtigungen entscheiden, wer grundsätzlich den Editor zu Gesicht bekommen darf (Abbildung 8.16).

Zugriffsberechtigungen TinyMCE
Abbildung 8.16: Zugriffsberechtigungen TinyMCE

Schritt 4 – Erstellen von Editorprofilen

Unter Verwalten – Strukturierung – Einstellungen – TinyMCE müssen Sie jetzt mindestens ein Profil anlegen. Die Idee hinter diesen Profilen ist, dass unterschiedliche Rollen unterschiedliche Anforderungen an den Editor haben. Sie werden auf der Seite auch darauf hingewiesen (derzeit noch in englischer Sprache), ein Profil zu erstellen. Klicken Sie dazu auf den Link create a new profile.

Sie sehen Einstellmöglichkeiten zu den Bereichen Basic Setup, Sichtbarbeit, Buttons and Plugins Editor Appearance, Cleanup and Output, CSS. Ich werde kurz die wichtigsten Einstellungen ansprechen:

  • Basic Setup: Hier legen Sie einen Namen für das Profil fest. Der Name kann aus beliebigen Zeichen bestehen. Wählen Sie außerdem im Feld Default State den Wert enabled. Damit schalten Sie den Editor standardmäßig ein. Sie müssen hier mindestens einer Benutzerrolle erlauben, dieses Profil zu nutzen.

  • Sichtbarkeit: Hier wählen Sie, wann der Editor angezeigt werden soll und wann nicht. Das Prinzip ist dasselbe wie bei den Blöcken (siehe Abschnitt 6.1 Blöcke). Lassen Sie auch diese Einstellungen unverändert.

  • Buttons and Plugins: Hier haben Sie die Möglichkeit, jedes Feature von TinyMCE zu aktivieren oder zu deaktivieren. Sie können damit genau festlegen, welche Editor-Icons in den einzelnen Profilen erscheinen sollen. Wenn Sie hier nichts auswählen, erscheint eine Standardauswahl von Icons.

  • Editor Appearance: Hier wählen Sie, wo der Editor erscheinen soll. Ich bevorzuge die Editorleiste (Toolbar) im oberen Bereich (top) und die Ausrichtung linksbündig (Toolbar alignment left). Standardmäßig befindet sich die Editorleiste im unteren Bereich (bottom) und in der Mitte (center).

  • Cleanup and Output: Hier legen Sie fest, wie der HTML-Code aussehen soll. Diese Einstellungen sind unter anderem praktisch, um Daten, die per Copy & Paste eingefügt werden, zu säubern.

  • CSS: Ein oft vergessener Parameter befindet sich im Bereich CSS. Die CSS-Dateien mancher Themes „beißen“ sich mit dem Editor. Das Layout wird im schlimmsten Fall gestört oder der Editor gar nicht angezeigt.

Wenn Sie bei Editor-CSS tinyMCE default auswählen, wird die Editor CSS explizit verwendet, und Sie liegen damit auf der sicheren Seite.

Schritt 5 – Texteingabe

Der Editor steht jetzt bei der Texteingabe zur Verfügung (Abbildung 8.17).

TinyMCE-Editor mit Pressemeldung
Abbildung 8.17: TinyMCE-Editor mit Pressemeldung

Am rechten unteren Rand des Editors befindet sich ein Anfasser mit dem Sie das Editorfenster nach Bedarf größer und kleiner ziehen können. Die Bedienung des Editors ist weitgehend selbsterklärend. Auf der Projektseite von TinyMCE finden Sie ein Dokumentationswiki5.

8.3.2 FCKeditor

Nach der Installation des TinyMCE werden Sie die Installation von FCKeditor lächelnd alleine durchführen können. Das Drupal FCKeditor-Modul liegt zum jetzigen Zeitpunkt (Juni 2008) bereits in einer stabilen, für produktive Websites geeigneten Version vor. Das Prinzip der Installation ist analog zu dem des TinyMCE:

  • FCKeditor-Drupal-Modul laden und installieren (fckeditor-6.x-1.2-1.tar.gz)6

  • FCKeditor-Quellcode laden und in das Verzeichnis des Moduls kopieren (FCKeditor_2.6.zip). Der Ordner /fckeditor/fckeditor besteht bereits.7

  • FCKeditor-Modul aktivieren (Verwalten – Strukturierung – Module) und das TinyMCE Modul deaktivieren.

  • Berechtigungen setzen (Verwalten – Benutzerverwaltung – Berechtigungen).

  • In Verwalten – Einstellungen - FCKeditor ein Profil erstellen (optional, da bereits Standard-Profile gesetzt sind).

  • Ausprobieren: Inhalt erstellen und Text im neuen Editor eingeben.

So weit, so einfach.

Da das TinyMCE-Modul von Drupal erst in der Entwicklungsversion vorliegt, verzichte ich an dieser Stelle auf eine Konfiguration mit zwei Editoren und schlage vor, zunächst nur einen Editor im System zu verwenden. Sie können beide Editoren installiert lassen und einfach das TinyMCE-Editor-Modul deaktivieren und dafür das FCKeditor-Modul aktivieren.

Der FCKeditor arbeitet ebenfalls mit Profilen und bringt nach der Installation bereits zwei vordefinierte Profile mit. Direkt nach der Aktivierung und Zuweisung der Benutzerrechte sollten Sie den Editor im Textfenster sehen (Abbildung 8.18).

FCKeditor mit Pressemeldung
Abbildung 8.18: FCKeditor mit Pressemeldung

Exkurs

Wie geht das jetzt aber mit zwei Editoren im System?

Es ist tatsächlich möglich, beliebig viele Editoren auf der Website zu verwenden. Die Situation ist auch gar nicht so selten. Benutzer haben immer so ihre Vorlieben, und oft benötigt man unterschiedliche Editoren für unterschiedliche Benutzer. Eine mögliche Lösung ist die Erstellung von drei Benutzerrollen (Rolle TinyMCE, Rolle FCKeditor, Rolle kein Editor). Anschließend müssen Sie die Benutzerberechtigungen an diese Rollen vergeben und die Zugriffsrechte dieser Rollen setzen. In den einzelnen Benutzerkonten müssen Sie dann die Rollenzugehörigkeiten per Checkbox setzen.

Ihre Bewertung: Nichts Durchschnitt: 5 (eine Stimme)