Tutorial WYMeditor 0.2.2 – Teil 2

Tutorial WYMeditor 0.2.2 – Teil 2Tutorial WYMeditor 0.2.2 – Teil 2

Im 2. Teil des Tutorials werde ich zeigen, wie der WYMeditor in eine PHP-Umgebung integriert wird und wir erstellen eine komfortablere Bildauswahl. Grundkenntnisse in PHP werden dabei vorausgesetzt. Falls Du damit noch nicht zurechtkommst, bei Claudia bekommst du sehr schön die ersten Schritte erklärt.

WYMeditor in PHP-Umgebung integrieren

Schau dir bitte noch einmal den Quelltext der editor.htm an. Ab Zeile 155 der Originaldatei beginnt der Beispieltext mit ‹h1>WYMeditor</h1›. Den Text haben wir ja in Teil 1 beim testen im Editor gesehen.

Dieser endet in Zeile 168 mit einem abschließenden ‹/p›. Den Text brauchen wir nicht und können ihn löschen. Dafür gibst du später in PHP an dieser Stelle den zu bearbeitenden Text aus! Angenommen, dein Text liegt in der Variablen $content, notierst du an dieser Stelle eben:

<?php
echo $content;
?>

Das ist alles. Falls Du mit der Datei experimentierst, ändere die Endung von .htm in .php!

Nun hast du 2 Möglichkeiten. Entweder du erweiterst editor.htm um ein Formular oder du baust alles notwendige in dein System ein. Hast du ein eigenes System, sollte es dir nicht schwerfallen, deine Datei entsprechend anzupassen. Hier die notwendigen Schritte (die Zeilennummern beziehen sich auf die originale editor.htm !):

Im head-Bereich werden das Stylesheet und 4 JavaScripte geladen (Zeilen 25–29). Kopiere diese und füge Sie in den head-Bereich deiner Datei ein. Erweitere deinen body-Tag mit den Angaben im body des Editors. So sollte es aussehen:

<link rel="stylesheet" type="text/css" href="skins/editor-skin.css" />
<script type="text/javascript" src="browser.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="wym.js"></script>
</head>

   <body id="main_body" class="editor" onload="init();"
onfocusout="bCleanPaste=false;displayPasteCleanup(true)">

Die Zeilen 33–153 fügst du nun in deine Datei ein. Meine Empfehlung: kopiere diese Zeilen in eine leere Datei und binde diese mittels include(); ein. So bleibt dein Quelltext schön übersichtlich. Vergiss nicht die letzten Zeilen einzufügen:

</div>
<!-- the editor -->
<iframe id="iframe_editor" src="iframe.htm"></iframe>
</div>

Damit es auch in deinem System funktioniert, erweitere den Submit-Button um folgenden Eintrag: onclick=“getCleanHTML()“. So sollte es ungefähr aussehen:

   <input type="submit" name="submitbt"
value="Eintragen" onclick="getCleanHTML()" />

Beim Absenden des Formulares enthält die Variable $_POST[‘txthtml‘] deinen Text! Das wars.
Tipp: Wenn du einen neuen Beitrag schreibst, hast Du ja noch keinen Text. Füge dann an der betreffenden Stelle einen Dummy ein, wie z.B. ‹p>Hier Text einfügen</p›. Der Firefox reagiert sonst auf keine Eingabe!

Eine komfortablere Bildauswahl

Um den Rahmen dieses Tutorials nicht zu sprengen, gehe ich davon aus, dass die Bilddateien schon auf dem Server in einem bestimmten Verzeichnis liegen. Wir ändern jetzt die vorhandene Dialogbox um ein Auswahlfeld, in dem alle vorhandenen Bilder mittels PHP eingetragen werden.

Vorbereitungen:
Zuerst erstelle eine Kopie der Datei image.htm im Ordner dialogs. Die Kopie benenne in bildwahl.php um.
Öffne im Hauptverzeichnis die Datei config.js. In Zeile 27 steht folgende Anweisung:

"image":    "image.htm",   //add or modify an image

Ersetze „image.htm“ durch „bildwahl.php“ und öffne diese Datei in deinem Editor. Suche dort nach folgenden Zeilen (in der Originaldatei die Zeilen 37–39):

   <p>
     <label>URL</label><input type="text" id="image_src"
value="" size="40" onchange="preview()" />
   </p>

Ersetze diese Zeilen mit folgendem Code:

<p>
<label>URL</label>
<select id="image_src" size="1" onchange="preview()">
<option value="">Bitte wählen Sie...</option>
<?php
$root = $_SERVER["DOCUMENT_ROOT"];
$bildordner = "/html/bilder";
$ordnerpfad = $root.$bildordner;
$bildadresse = "http://deine-domain.de/bilder";
$handle = opendir($ordnerpfad);
while ($datei = readdir ($handle)) {
    echo $datei;
if($datei != "." && $datei != "..") {
if(is_dir($ordnerpfad."/".$datei)) {
    echo "/".$datei."<br/>";
} else {
echo "<option value='".$bildadresse."/".$datei."'>";
echo $datei."</option>";
}
}
}
closedir($handle);
?>
 </select>
 </p>

Damit das Script auch bei dir funktioniert, musst du die beiden rot hervorgehobenen Variablen entsprechend anpassen. In $bildordner trage den Pfad ab deinem ftp-Hauptverzeichnis ein. Welcher Pfad das ist? Wenn ich mich per ftp einlogge, muss ich zuerst den Websiteordner „html“ öffnen und dann den Bildordner „Bilder“, ergibt „/html/bilder“. Alles klar?

Die 2. Variable, $bildadresse, enthält die URL zu deinem Bildordner. Das sollte einfach herauszufinden sein, oder?
Wenn du alles richtig gemacht hast, werden alle Bilder aus deinem Bildordner in der Auswahlliste angezeigt. Ich denke, damit kann man einfacher arbeiten als mit der Standard-Bildauswahl.

~~Das war der 2. Teil, im nächsten Teil zeige ich dir, wie du mit Tabellen und Templates arbeiten kannst. Feedbacks, Pingbacks und Trackbacks sind natürlich immer Willkommen. Bis zum nächsten Mal!~~

Das war der 2. Teil. Wie ich diese Woche erfahren habe, soll die Version 0.3 des WYMeditors vielleicht noch diesen Monat erscheinen. Sie bringt viel Neues und vereinfacht die Integration erheblich. Das Tutorial führe ich dann mit dieser Version weiter. Ich bitte also um ein wenig Geduld!