Treffen vom 8. April 2008 - Teil 0,5: TinyMCE Installation / Konfiguration

Das Thema TinyMCE möchte ich hier aber auch noch einmal kurz aufgreifen. Dieser lässt sich in Drupal doch recht gut als WYSIWYG Editor Einsetzen.

Auch hier eine kleine Step-by-Step Anleitung

Step 1 benötigte Module

Step 2 Installation der Module
Nach dem Download/ Upload auf die eigene Seite werden alle Modulbestandteile aktiviert.
Den TinyMCE selbst entpackt man zuerst und lädt den Ordner jscripts ( tinymce Javascript Dateien ) dann in das Verzeichnis modules/tinymce/tinymce.

Step 3 Einrichtung
Mithilfe des Moduls tinymce_autoconf legen wir uns eine StandardKonfig für den Tiny an - das Modul erreicht man über *Einstellungen > TinyMCE -- create default profile*.

Nach anlegen der Konfig wechseln wir zu *Einstellungen > TinyMCE* und können das Default Profil bearbeiten. Natürlich lassen sich auch neue Profile anlegen, die man dann bestimmten Userrollen zuordnen könnte..

Ein Klick auf *Bearbeiten* öffnet die Profileinstellungen:

  • Basic Setup - ein paar grundsätzliche Einstellungen ( Sprache, Benutzergruppen,Aktivierung/ Deaktivierung etc. )
  • Sichtbarkeit - sehr nützlich, um einzustellen, auf welchen Seiten der Editor angezeigt werden darf
  • Buttons und Plugins - Einstellung für die Tiny Oberfläche - hier kann man genau festlegen, welche Funktionen dem Nutzer zur Verfügung stehen.
  • Editor Appearance - Einstellungen zur Darstellung der Toolbar - unter *Block formats* kann man bestimmte Tags nicht zulassen
  • Cleanup and Output - Einstellungen zur AUsgabe auf der Seite
  • CSS - hier kann man eigene CSS Stile, die auf der Seite verwendet werden mit einbinden - einfach die entsprechende Datei hochladen - eintragen und schon stehen die Klassen zur Verwendung im Tiny bereit *wichtig* - natürlich müssen diese Klassen auch in der style.css des Themes zu finden sein

Step 4 Nun geht es los
Wenn alles korrekt eingerichtet ist, sollten die üblichen Textareas verschwunden sein - hier findet sich nun der TinyMCE..

Step 5 Advanced

Ich sprach gestern auch die Möglichkeit an, nur bestimmte Tags im Tiny zu erlauben - dies müsste man derzeit noch händisch über Änderungen in der Javascript vornehmen.
Dieses Vorgehen wird im Wiki beschrieben:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements
Dies ist recht praktisch, um dem Nutzer auch nach reinkopieren von den wundervoll formatierten Word Texten die Möglichkeit zu nehmen, die Seite komplett zu zerschiessen.

Natürlich könnte man hier auch die Tiny eigene Funktionen realisieren
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/paste

5
Your rating: Keines Average: 5 (1 vote)

Klasse Zusammenfassung

Bild von tommi

Chapeau, Steffen. Auch an derHasi. Eure Zusammenfassungen veredeln eure Vorträge, wie ich finde. Klasse, dass Ihr euch die Mühe gemacht habt. Wir sollten ein Karma-Punkt-Modul einbauen... Es ist ja schliesslich eine Menge Mühe, sowas zu schreiben.

Wenn ihr nächste Woche nochmal Lust habt, baut ein paar Screenshots ein. Vielleicht können wir dann daran arbeiten, das alles etwas zu strukturieren und ein Modell zu entwickeln, wie man auch die Doku auf Drupalcenter besser und intuitiver strukturieren kann. Tue Gutes und werde berühmt dadurch }:]< Pssst...

Es ist übrigens ein neues Template in der Mache für die Seite. Ich hoffe, ihr seid nicht böse, wenn Ihr Anja und mir einfach vertrauen müsst, dass das schon schön sein wird. Einfach der Einfachkeit halber, sonst diskutieren wir lange drüber. Wenns k***e ist, können wir ja wieder auf dieses hier zurückschalten.

DUG Hannover rocks. Einige unserer wichtigsten Mitglieder sind international, aus feindlichem blaugelbem Gebiet und sogar aus dem Freistaat. Sozusagen kosmopolitisch...

Von mir auch die

Bild von aschiwi

Von mir auch die höchstmögliche Karmapunktzahl für derHasi und Steffen!

Tinymce Templates

Bild von tommi

Eine Sache, die im Tinymce an sich vorhanden ist, aber leider in Drupal nicht einfach so aktivierbar war, sind Templates. Dies bedeutet beliebige Html-Fragmente, denen sich dann sogar noch passende Bildchen, die illustireren, worum es sich handelt, zuweisen lassen. Diese kann man dann per Klick in die Textarea einfügen und natürlich beliebig weiterverarbeiten.

An sich konnte das doch nicht so schwer sein, es für Drupal zu aktivieren, und "Schoonzie" Nick Schoonen hat ein kurzes Tutorial in seinem Blog veröffentlicht, wie es geht: Aktivieren des Template Plugins von Tinymce in Drupal

Vor allem im "Corporate" Bereich halte ich das für eine unglaublich nützliche Funktion: Autoren mit etwas erweiterten Rechten bekommen die Möglichkeit, diese Elemente einzufügen. Die Möglichkeiten sind vielfältig, und man kennt es aus Typo3: Ein Text mit einem Bild links oder rechts umflossen, eine schön formatierte Tabelle, ein Texfragment mit zwei Zwischenüberschriften und gefettetem Anreissertext... Noch besser, wenn der "Autor" minimale Html-Kenntnisse hat, dann kann er es noch modifizieren.

Im Prinzip alle Elemente, die man für irgendwelche wiederkehrenden Sachen (Protokoll der Mitarbeitersitzung?) braucht, und für die es aber zu umständlich wäre, einen extra Inhaltstyp zu erstellen. Auch ist CCK, vor allem wenn es mehr als drei, vier Eingabefelder werden, tendenziell verwirrend. Man hat also mit CCK "harte" Vorlagen, und mit den Templates "weiche". Meinem Traum von einem angenehmen und vielfältigen und trotzdem fast idiotensicheren Formatierungsangebot für den Autor oder Editor steht also nichts mehr im Wege. :D

So ganz nebenbei: FCKeditor hat diese Funktionalität auch, und die hat auch schon immer in Drupal funktioniert ;)