Teil 3: Tiny-MCE in PHP-Projekten
- Tiny-MCE in PHP-Projekten
- Teil 2: Tiny-MCE in PHP-Projekten
- Teil 3: Tiny-MCE in PHP-Projekten
Anbindung über Xajax Nun ersetzt Tiny-MCE grundsätzlich textarea-Felder. Betätigt man dann den Speichern-Button, wird ein Submit ausgelöst und der Inhalt des Editors an den Server übertragen, wo Sie ihn weiter verarbeiten können. Dieses Verhalten ist aber nicht immer gewünscht, viel mehr so...
Anbindung über Xajax
Nun ersetzt Tiny-MCE grundsätzlich textarea-Felder. Betätigt man dann den Speichern-Button, wird ein Submit ausgelöst und der Inhalt des Editors an den Server übertragen, wo Sie ihn weiter verarbeiten können. Dieses Verhalten ist aber nicht immer gewünscht, viel mehr soll vielleicht ein Text auf einer Seite in den Editor geladen und dargestellt werden.
Nach eventuell vorgenommenen Änderungen soll dann das Ergebnis im Hintergrund gespeichert und der Editor wieder geschlossen werden, ohne dass dabei die Seite neu aufgebaut wird. Ein solches Verhalten kann man unter Einbeziehung von Ajax gut umsetzen.
Will man PHP mit Ajax verknüpfen, bietet das Framework Xajax eine genial einfache Möglichkeit, von der Browser-Seite aus im Hintergrund auf die PHP-Klassen zuzugreifen. Um den Ajax-Overhead etwas zu minimieren, wurde daher im vorliegenden Beispiel Xajax Version 0.5 RC1 als Basis für die Web-2.0-Funktionalität eingesetzt, die sich im gleichen Pfad wie Tiny-MCE befinden sollte.Die Vorgehensweise ist relativ einfach: Der Text wird in einem <div>-Tag dargestellt, Tiny-MCE wird im none-Modus initialisiert. Nun kann durch Klick auf den Button Editor einschalten der Editor geöffnet werden, indem das MCE-Kommando addControl ausgeführt wird. Dies geschieht in der PHP-Routine toggleEditor, die einige Werte ermittelt und daraus Xajax-Response-Befehle erstellt, welche wiederum im Browser dafür sorgen, dass Tiny-MCE an das <div>-Tag mit der ID content gebunden wird. Dabei übernimmt Tiny-MCE den Textanteil (innerHTML) des <div>-Tags und stellt diesen dar.
Das kann man soweit auch in reinem Javascript ausführen, Xajax ist hier nicht zwingend notwendig. Interessant wird es aber beim Speichern, nach dem Änderungen am Text vorgenommen wurden. Dazu wird der Button Speichern gedrückt, der auch nur bei aktivem Editor vorhanden ist. Der eigentliche Submit-Vorgang wird aber nicht ausgeführt, sondern nur das Event onsubmit ausgelöst und danach abgebrochen.
In der onsubmit-Event-Behandlungsroutine wird nun die Javascript-Funktion saveContent() aufgerufen und mit return false; abgeschlossen - das verhindert die Übertragung der Daten an den Server und den damit verbundenen Neuaufruf der Seite. In der Funktion wird nun per getContent() der Inhalt des Editors ausgelesen und an die Xajax-Funktion xajax_receiveContent() weitergereicht.
Die korrespondierende PHP-Funktion auf dem Server nimmt dann den Text als Parameter entgegen. Hier könnte dieser auf der Server-Seite weiterverarbeitet oder gespeichert werden. Im Beispiel erzeugt Xajax nur eine Javascript-Alertbox, die den Text anzeigt. Das Listing ist aus Platzgründen nur auszugsweise angegeben.
<?php
// wir benutzen hier xajax 0.5RC1
require("scripts/xajax_0.5/xajax_core/xajax.inc.php");
[...]
function receiveContent($text) {
// xajax-Response-Objekt zur
Kommunikation mit dem Browser
$response = new xajaxResponse();
// der empfangene Text wird angezeigt
$response->alert("Folgender Text
wurde empfangen: \n\n '".$text."'");
// die xajax-Response.
return $response; }
// xajax Initialisierung
$xajax = new xajax();
// Anmeldung der PHP-Funktionen, da-
mit sie per Javascript aufrufbar sind
$xajax->registerFunction
("toggleEditor");
$xajax->registerFunction
("receiveContent");
// xajax Requests vorbereiten
$xajax->processRequest();
?><html><head>
[...]<?php
// Einbinden der Xajax-Sourcen ...
$xajax->printJavascript("scripts/
xajax_0.5/");
?>
[...]
// Die Konfiguration für den Editor,
mit "none" passiert erstmal nichts
tinyMCE.init({
mode: "none",
theme: "advanced"
});
// reicht den Text aus dem Editor per
Xajax an die PHP-Funktion weiter
function saveContent(id) {
var editor = TinyMCE.get(id);
xajax_receiveContent(editor.
getContent()); }
[...]<form method="post" onsubmit="save
Content('content'); return false;">
[...]<div id="content" style="border:
1px solid grey; width: 30em; height:10em;" name="inhalt" cols="50" rows="10">Ein unformatierter Text.</div>
[...]Wollen Sie statt der gezeigten externen Buttons lieber den Save-Button im Tiny-MCE selbst benutzen, bietet Tiny-MCE Callback-Funktionen an, die beim Eintritt bestimmter Situationen aufgerufen werden, so auch beim Speichern. Dazu müssen Sie der Option save_callback eine Javascript-Funktion zuweisen. Hier ist zu beachten, dass der Submit-Vorgang nicht ausgelöst wird, was Tiny-MCE an dieser Stelle normalerweise durchführen würde.
