Texteditor de luxe

Teil 3: Tiny-MCE in PHP-Projekten

Inhalt
  1. Tiny-MCE in PHP-Projekten
  2. Teil 2: Tiny-MCE in PHP-Projekten
  3. 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 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.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.