Tutorial TinyMCE

Tutorials von Thomas Frei-Herrmann

Tutorial Content-Management-System (CMS) - “TinyMCE” - für NetObjects Fusion. Guckt Euch bitte auch eine Alternative zum Einbau hier an.

Diesen Editor könntet Ihr Euch auf der Seite von “TinyMCE” downloaden, einige Dateien wurden aber von uns editiert, daher nehmt bitte mein Download.

http://www.tinymce.com/download/download.php

Meine Beschreibung bezieht sich auf Version “TinyMCE 3.4.6” vom 29.09.2011. Dieses Tool hat “Klaus2” in der NOF-Schule.de vorgestellt.

Hier könnt Ihr diesen Editor testen:

http://www.tinymce.com/tryit/full.php

... und lest Euch auch die Lizenz bitte mal durch.

Wenn Ihr die ZIP-Datei herunter geladen habt, entpackt diese bitte in irgendein Verzeichnis. Ihr erhaltet den Ordner:

tinymce

Diesen Ordner (tinymce) kopiert Ihr mit Eurem FTP-Programm in das Stammverzeichnis Eures Projketes auf Euren Server.

Schützt diesen Ordner dann mittels .htaccess, sodass da niemand, außer dem Administrator, dran kommt.

Hier könnt Ihr Euch den Ordner tinymce von meinem Server downloaden. Ich habe diesen ein wenig modifiziert und Dateien, die nicht benötigt werden, entfernt. Außerdem ist mit meinen Skripten die Möglichkeit zum Upload von Bildern geschaffen worden und dafür bestimmte relative Pfade angegeben.

Letzte Änderung am 12.10.2011
Download tinymce. Downloads insgesamt seit dem 12.10.2011: 508

Diejenigen von Euch, die NOF 12 Update 1 haben, können sich hier eine “Vorlage” downloaden. In diese Vorlage sind bereits sämtliche zusätzlichen Ordner und z.B. die Text- und CSS Dateien integriert. Ihr müsst Euch aber dennoch den Ordner “tinymce” zusätzlich oben downloaden.

Letzte Änderung am 18.10.2011
Download Vorlage ab NOF 12 Update 1. Downloads insgesamt seit dem 12.10.2011: 223

In diesem Beispiel habe ich 3 Seiten, auf denen 3 verschiedene Texte geändert werden können.

Mein Tutorial geht davon aus, dass Ihr nach “Asset-Typ” publiziert und für diese Verzeichnis-Struktur sind auch die hier verwendeten Skripte erstellt.

Erstellt Euch bitte in Eurem vorhandenen Verzeichnis:

assets

noch 2 zusätzliche Verzeichnisse mit Eurem FTP-Programm, und zwar die Verzeichnisse:

bilder - für eventuell mittels “TinyMCE” hochzuladende Bilder, bitte beachtet hierzu auch meinen Hinweis für die “Home”.
und
texte - für die zu inkludierenden (mittels PHP-Skript-Befehl) Texte auf den Seiten (hier “Seite 1”, “Seite 2” und “Seite 3”)

In das Verzeichnis texte kopiert Ihr 3 leere Textdateien, die Ihr so nennt:

text1.txt - für “Seite 1”
text2.txt - für “Seite 2”
text3.txt - für “Seite 3”

Seiten mit inkludierten Text-Dateien

Alle Seiten, die inkludierte Texte zeigen sollen, sowie alle anderen Seiten auf denen hier PHP-Skripte eingebaut werden, müssen die Dateierweiterung .php tragen, damit diese PHP-Befehle verarbeitet werden können. Euer Server benötigt mindestens PHP 5 um mit “TinyMCE” arbeiten zu können.

Nun zieht Ihr Euch einen neuen Layout-Bereich auf den Seiten, auf denen die Inhalte aus dem “TinyMCE” Editor angezeigt werden sollen, auf und inkludiert die jeweilige Text-Datei, hier als Beispiel “text1.txt” auf “Seite 1” meines Projektes hier. Auf den anderen beiden Seiten habe ich dann entsprechend die anderen beiden Text-Dateien inkludiert, also “text2.txt” und “text3.txt”. Ihr könnt beliebig viele solcher Textdateien erstellen, also z.B. dann “text4.txt” usw ...

> Layout-Bereich aufziehen > Fenster “Layout-Bereich-Eigenschaften” > Button “HTML” > Code unten “vor dem Tag” (ab NOF 11 “vorher”) einfügen.

<?php include("../assets/texte/text1.txt"); ?>

Ihr könnt zum Inkludieren natürlich ebenso gut diesen Code in die HTML eines Textfeldes oder einer Tabelle eintragen, anstatt in einen Layout-Bereich.

Alle unten beschrieben Seiten

... gehören in den Ordner tinymce, den Ihr so in Eurer “Publizieren-Ansicht” erstellt und dann diese Seiten in diesen Ordner verschiebt.

Seite Auswahl - nur für den Administrator, daher hier nicht zu sehen - auswahl.php

Die Text-Dateien werden in einer “foreach” Schleife im Skript unten erkannt. Das Skript unten gehört dann in meiner Seite “Auswahl” wieder in die HTML eines neuen Layout-Bereichs und wird sämtliche vorhandenen TXT-Dateien als Link auflisten. Die Text-Datei wird mit der Variable “$Dateiname” belegt.

> Layout-Bereich aufziehen > Fenster “Layout-Bereich-Eigenschaften” > Button “HTML” > Code unten “vor dem Tag” (ab NOF 11 “vorher”) einfügen.

<?php
   foreach(glob("../assets/texte/*.txt") as $Dateiname)
   {
      echo '<br><a href="./andern.php?Dateiname=' . $Dateiname . '">' . basename ($Dateiname,'.txt') . ' zum Ändern öffnen</a><br>';
   }
?>

Seite Ändern - nur für den Administrator - andern.php (in die HTML dieser Seite gehört auch später noch das TinyMCE-Skript unten)

... auf der Seite “Ändern” zieht Ihr Euch wieder einen neuen Layout-Bereich auf und hakt im Fenster “Layout-Bereich-Eigenschaften” > “Formular” an

Dann zieht Ihr Euch von Euren Formular-Werkzeugen ein “Mehrzeiliges Eingabefeld” auf, in dem später der “TinyMCE” Editor erscheinen wird.

Bitte achtet auf den Namen des mehrzeiligen Eingabefeldes, denn dieser muss im Code der Seite “speichern.php” (unten) identisch sein.
In das “Mehrzeilige Eingabefeld” (hier mit dem Namen: MehrzeiligesEingabefeld1) fügt Ihr bei “Text:” den folgenden Code ein:

<?php echo file_get_contents($_GET['Dateiname']); ?>

Seite zum Verarbeiten der Skripte - nur für den Administrator - speichern.php

Diese PHP-Seite habe ich händisch mit meinem Windows-Editor erstellt, im ANSI-Format gespeichert und ebenfalls in die “Assets-Verwaltung” eingelesen und dann auch in den Ordner tinymce verschoben, damit diese Seite immer gleich automatisch von NOF mit publiziert wird. Diese PHP-Seite hat folgenden Inhalt:

<?php
file_put_contents($_POST['Dateiname'], stripslashes($_POST['MehrzeiligesEingabefeld1']));
header ('location: ./auswahl.php');
?>

... dann klickt Ihr auf den 2. Button “Allgemeine Formulareigenschaften” und gebt bei “Aktion:” dieses Skript mit der korrekten relativen Pfadangabe an, hier

./speichern.php

Weiterhin fügt Ihr noch mittels Klick auf das “+” Zeichen ein verdecktes Feld mit dem “Namen” Dateiname, sowie dem “Wert” wie unten gezeigt, hinzu:

<?php echo $_GET['Dateiname'] ?>

In die Seite “Ändern” (andern.php) gehört dann noch das eigentliche Skript von “TinyMCE” unten.

Als "Insider-Wissen" noch die Info, das ich das aus der Original-Datei “full.html” aus dem Ordner \tinymce\examples von “TinyMCE” heraus kopiert habe. Der Inhalt wurde dabei leicht abgeändert.

Kopiert Euch also dieses Skript unten und fügt es in die HTML des Layouts der Seite “andern.php” ein.

> auf Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > Skript “Zwischen Head Tags” einfügen

Im Skript (oben) wurden die gelb und weiß markierten Zeilen noch angepasst. Ganz oben die Verlinkung zur Datei “tiny_mce.js”.

Weiter unten im Skript habe ich die 3 CSS-Dateien von NOF angegeben und mir noch eine eigene, zusätzliche CSS-Datei tinystyle.css mit diesem Inhalt erstellt, die in meinen “Vorlagen” bereits mit integriert ist ...

body.mceContentBody
{
background: #FFFFFF;}

... in der ich lediglich den Hintergrund, den BODY {Style} (hier weiß) für den TinyMCE-Editor angegeben habe, da sonst der Hintergrund der “style.css” von NOF auch im TinyMCE-Editor erscheinen würde. Die CSS-Dateien von NOF müsst Ihr an dieser Stelle mit angeben, damit im Editor die gleiche CSS, wie auf Eurer Seite, verwendet wird.

content_css : "../html/fusion.css,..html/style.css,../html/tinystyle.css,../html/site.css",

... weiterhin habe ich die Größe des Editors in Pixeln angepasst.

Da Plugins, wie z.B. die Smileys, sich in dem mittels .htaccess geschützten Verzeichnis "tinymce" im Ordner “plugins” befinden:

tinymce/jscripts/tiny_mce/plugins

... würden diese auf den öffentlich anzuzeigenden Seiten, die sich im Ordner "html" befinden, nicht angezeigt werden. Ich habe daher den gesamten Order "plugins", mit der gleichen Verzeichnis-Struktur, nochmals in mein Verzeichnis "html" kopiert, damit die relativen Pfadangaben in den TXT-Dateien auch hier wirken und alles korrekt angezeigt wird.

html/jscripts/tiny_mce/plugins

Ihr legt Euch also in Eurem Verzeichnis “html” noch zusätzlich diesen Pfad mit Eurem FTP-Programm an.

Also im Verzeichnis html > das Verzeichnis jscripts und dann im Verzeichnis jscripts > das Verzeichnis tiny_mce

in das Ihr dann den gesamten Ordner plugins von TinyMCE kopiert, damit die Smileys und andere Plugins auch auf den öffentlichen HTML-Seiten korrekt angezeigt werden.

Hinweis:

Solltet Ihr den “php include” Befehl zu Anzeige der Text-Dateien von TinyMCE auf einer Seite im Stammverzeichnis Eures Projektes einbauen, also z.B. auf der Startseite, dann werden eventuell eingebaute Bilder bei unserer Version hier nicht gleich angezeigt, da die relativen Pfadangaben hier so eingestellt sind, dass Bilder nur auf “Unterseiten” in einem Verzeichnis tiefer angezeigt werden. Ihr könnt dann aber den relativen Pfad zu den Bildern sehr leicht ebenfalls im TinyMCE-Editor ändern, indem Ihr dort auf das Symbol “HTML” klickt und den Pfad anpasst.

Die relative Pfadangabe (dort immer mit 2 Punkten ../) zu einem Bild sieht dann dort so ähnlich aus wie z.B.:

... diese relative Pfadangabe müsstet Ihr dann für ein Bild auf der Startseite in einen Punkt ./ ändern, damit das Bild auch angezeigt werden kann.

nach oben

Viel Erfolg!

diese Seite weiter empfehlen