Schlagwort-Archive: Drupal

Der besondere Charme von Drupal – Teil 3: WYSIWYG schreiben und Medien verwalten

Drupal LogoDie 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

Der Drupal WYSIWYG-EditorJetzt 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

Bilderverwaltung für das CMS Drupal

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.

Der besondere Charme von Drupal – Teil 2: Inhaltselemente on Board – von Haus aus vielseitig

DrupalBei der Wahl des geeigneten Content Management Systems spielen die Funktionen, die das System im Kern mitbringt, eine wichtige Rolle: Was schon da ist, muss nicht erst recherchiert, bewertet, installiert und konfiguriert werden. Module, die das CMS an Bord hat, unterliegen denselben Standards und harmonieren per se mit einander. Wie steht es mit der Ausstattung, die Drupal mitbringt? In diesem Artikel geht es um die Möglichkeiten, Inhalte zu organisieren und zu präsentieren. Er bezieht sich auf Drupal Version 7.

Module – Pflicht und Kür

Die Funktionen von Drupal kommen als Module daher. Einige werden mit dem Kern installiert und aktiviert, andere können nachträglich aktiviert werden (optionalen Kernmodule). Von Haus aus aktiviert sind die Inhaltselemente Seite und Artikel.

Seiten eignen sich für statische Inhalte, sind also Brot und Butter einer Website. In der Grundkonfiguration bestehen sie aus

  • Überschrift
  • Inhalt: ein einfaches Textfeld. Der Text kann mit ausgewählten HTML-Elementen strukturiert werden. Die Auswahl lässt sich nach Bedarf – auch für unterschiedliche Benutzergruppen – konfigurieren. Mehr Komfort bietet ein nachinstallierter WYSIWYG-Editor, der Textbearbeitung ohne HTML-Kenntnisse erlaubt. Der ckeditor ist bewährt und vielseitig. Zusammen mit dem Dateibrowser IMCE habt Ihr eine komfortable Textverarbeitung.
  • Menüeinbindung
  • Versionsinformationen: Hier können Versionen der Seite mit einem Kommentar gespeichert und bei Bedarf wieder rekonstruiert werden.
  • Informationen zum Autor

Aktiviert man das Modul Path, lässt sich die URL der Seite frei und suchmaschinenfreundlich konfigurieren.

Artikel werden für zeitkritische Informationen benutzt, die nach Kategorien organisiert und in Auszügen z.B. auf der Homepage aufgelistet werden können. Artikel haben neben Optionen, wie wir sie von den Seiten kennen, zusätzlich

  • Tags
  • ein Bild
  • die Möglichkeit, den Teaser auf der Homepage anzuzeigen.

Aktiviert man das Modul Comment, lassen sich unterschiedliche Inhaltselemente mit einem Kommentarfeld versehen. Fertig ist das Blog! Die Kommentarfunktion ist so flexibel, dass sie individuell pro Artikel/Seite freigegeben oder gesperrt werden können.

Für strukturierte Informationen, z.B. Anleitungen und Handbücher, aktivieren wir das Modul Book. Zusätzlich zu den üblichen Felder finden wir hier die Möglichkeit, die Inhalte hierarchisch zu organisieren und mit einer internen Navigation zu verbinden. So können wir durch die Seiten blättern.

Mit dem Modul Blog läßt sich für alle berechtigten benutzer ein eigenes Blog anlegen. Das Modul Forum bietet ein einfaches Forum an, das mit externen Modulen wie Advanced Forum aufgerüstet werden kann.

Drupal-Modul PollFür kleine Umfragen eignet sich das Modul Poll. Aktivieren reicht, und man kann schnell Interaktivität auf die Website bringen.

Wer externe Inhalte, z.B. den RSS-Feed des Orakelblog auf der Website einbinden möchte, aktiviert das Modul Aggregator. Genauso leicht lässt sich auch ein Feed der Artikel der hier betrachteten Website zur Verfügung stellen.

Hinter dem Modul Contact verbirgt sich mehr als das üblich Webseiten-Kontaktformular. Stellt man die Berechtigung so ein, kann jeder registrierte Benutzer ein eigenes Kontaktformular bereitstellen, um ihn anzuschreiben.

Blöcke – fertige Bauteile oder ganz individuell befüllt

Neben den Inhaltselementen, die wie Seiten, Formular oder Forum direkt über einen Menülink aufgerufen werden können, kann man kleine Inhalte in sogenannten Blöcken frei auf den Seiten positionieren. Manche Module wie der Aggregator bieten schon fertige Blöcke an, die Ihr dann nach Bedarf positionieren könnt: Stellt den Feed des Orakelblog in die rechte Spalte, linke Spalte, in den Fußbereich oder wo auch immer. Auch kleine nette Funktionen wie „Wer ist online“ sind schon vorbereitet und müssen nur aktiviert und positioniert werden. Dabei kann man nicht nur wählen, wo der Block sich auf der Seite befindet, sondern auch, auf welchen Seiten er erscheinen soll. Vielleicht braucht Ihr den Feed ja nur auf der Homepage?

Volle Flexibilität bieten selbst definierte Blöcke, die Ihr mit eigenen Inhalten füllen und frei positionieren könnt.

Damit ist Drupal mit den wichtigsten Funktionen für eine vielseitige, interaktive Website ausgestattet. Sieht man vom WYSIWYG-Editor ab, kann es schon mit Bordmitteln vielen Ansprüchen gerecht werden.