Texteditor de luxe

Tiny-MCE in PHP-Projekten

Ein simples Texteingabefeld in Form einer Textarea mutet auch im Web eher archaisch an. Wer mit der Zeit geht, braucht einen Word-ähnlichen Editor.

Autor: Redaktion pcmagazin • 20.11.2008 • ca. 3:45 Min

Tiny-MCE in eigenen PHP-Projekten — Eingabefelder mit vielen Funktionen bieten guten Service.

Inhalt

Häufig ist es erwünscht, auch formatierten Text in Eingabefeldern nutzen zu können. Dies wäre im Normalfall nur durch die manuelle Eingabe beispielsweise von HTML-Code möglich - das ist allerdings nicht mehr zeitgemäß. In diese Bresche springt Tiny-MCE - ein von Moxiecode AB aus Schweden angebotener Javascript-Editor, der unter der LPGL steht und als Open-Source-Software problemlos in eigene Projekte eingebunden werden kann.

Tiny-MCE ist ein äußerst mächtiges Werkzeug. Dieser Workshop bezieht sich auf die Version 3.1.1, die seit Mitte August erhältlich ist. Tiny-MCE legt sich übrigens nicht auf bevorzugte Umgebungen fest, sondern stellt als reine Javascript-Anwendung an die Basis der zugrunde liegenden Web-Applikation wenig Ansprüche. In Verbindung mit PHP und einem Ajax-Framework, beispielsweise xajax, lässt sich Tiny-MCE sehr genau kontrollieren und komfortabel in die eigene Software-Welt einbinden. Aber zunächst soll es hier um das Einbinden des Editors ohne direkte Server-Anbindung gehen.

Ohne Startprobleme

Die Installation von Tiny-MCE beschränkt sich auf das Herunterladen und Entpacken der Javascript-Sourcen. Zunächst ist dazu das Paket des Editors von der Moxiecode-Seite in ein Verzeichnis zu entpacken, auf das der Web-Server, unter dem die Web-Seiten verwaltet werden, Zugriff hat. In der Regel wird das ein Verzeichnis unter dem Documentroot des jeweiligen (virtuellen) Web-Servers (<documentroot>) sein, wie beispielsweise <documentroot>/scripts/tiny_mce. In diesem Verzeichnis liegen nun alle benötigten Dateien für den Editor im Zugriff, mehr ist als Installationsmaßnahme nicht notwendig.

Tiny-MCE lässt sich in der Regel problemlos mit Javascript-Frameworks wie Moo Tools oder Prototype zusammen betreiben, trotzdem lohnt ein Blick in die Dokumentation. Hier werden bekannte Inkompatibilitäten samt Workarounds aufgelistet. Denn um eigenständig zu sein, bietet die Software von Hause aus etliche Funktionen zur Manipulation des DOM, was hier und da auf Grund der Komplexität zu Konflikten führen kann.

Tiny-MCE kann nun auf unterschiedliche Weise in die eigene Seite integriert werden. Die einfachste Variante ersetzt die Tags vom Typ textarea mit dem neuen Editor. Dies ist eine sehr unkomplizierte Methode, denn Sie müssen dazu lediglich auf der Seite, in der Tiny-MCE alle Textareas ersetzten soll, Folgendes im <head>-Bereich eingeben (der Pfad muss natürlich den eigenen Gegebenheiten angepasst werden):

<script language="javascript" type=
"text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script><script language="javascript" type=
"text/javascript">
tinyMCE.init({
mode : "textareas"
});</script>

Damit ist die Arbeit grundsätzlich schon erledigt - wenn Sie die Seite im Browser öffnen, können Sie in den Textarea-Feldern statt einfachen ASCII-Texts nun ansehnlich formatierten HTML-Code eingeben, der dann beim Übertragen des jeweiligen Formulars per submit an den Server weitergereicht wird.

Die erste Zeile lädt die Javascript-Datei, und im internen Script wird ein Tiny-MCE-Objekt in dem Modus textareas angelegt. Dabei werden diese durch einen komforta-blen Editor ersetzt. Einfacher geht's wirklich nicht. Die beim Initialisieren per TinyMCE.init übergebenen Optionen steuern die Software - dieser Bereich ist das Kernstück zur Einstellung und Anpassung des Programms. Allerdings wird mit dieser Einstellung nur ein kleines Subset der gegebenen Möglichkeiten gezeigt; hier gilt es, dem Editor per Konfiguration mehr zu entlocken.

Modus vivendi

textareas ist allerdings nicht der einzige Modus, in dem der Editor betrieben werden kann: Es gibt noch die Modi specific_textareas, exact und none. Der mit specific_textareas bezeichnete Modus wird mit einer weiteren Option genauer definiert: So wird mit editor_selector eine Sammlung von CSS-Klassen aufgelistet, Tiny-MCE konvertiert dann die Textareas, die zu diesen Klassen gehören, zum Editor, alle anderen bleiben außen vor.

Umgekehrtes Verhalten zeigt editor_deselector: Hier werden alle Textareas umgewandelt bis auf jene, die einer CSS-Klasse angehören, deren Namen sich in der Auflistung befinden. Sie können auch mehrere Konfigurationen gleichzeitig einsetzen, wenn Sie statt nur einer Konfiguration zwei angeben:

tinyMCE.init({
mode: "specific_textareas",
theme: "simple",
editor_selector: "mceEinfach"
});
tinyMCE.init({
mode: "specific_textareas",
theme: "advanced",
editor_selector: "mceKomplex"
});

Damit werden nun alle textarea-Felder, die der CSS-Klasse mceEinfach angehören, mit der entsprechend einfachen Ausstattung des Editors belegt, wohingegen die Felder der Klasse mceKomplex mehr Funktionalitäten aufweisen.

Der Betriebsmodus namens exact konvertiert alle Elemente, deren eindeutige CSS-ID unter der zusätzlichen Option elements eingetragen ist, in einen Editor. Dieses Verhalten kann auch auf div, span und andere Elemente angewandt werden.

Für Anwendungen mit Ajax-Unterstützung ist der Modus none besonders interessant. In diesem Modus verhält sich Tiny-MCE erst einmal ruhig und führt keinerlei Aktionen aus. Erst wenn etwa durch den Aufruf des internen Kommandos mceAddControl per Javascript ein Element an das Objekt übergeben wird, öffnet sich der Editor.

Da man auch durch Callback-Funktionen den Inhalt des Editors direkt auslesen und speichern kann, lässt sich Tiny-MCE so auch ohne das Auslesen per GET oder POST des umgebenden Formulars nutzen. Dies ist für Ajax-Anwendungen wichtig, bei denen es beim Speichern der Daten darauf ankommt, diese im Hintergrund in der Datenbank zu speichern, ohne dass die Seite komplett neu geladen werden muss.

Nächste Seite

1 2 3