Tutorials von Thomas Frei-Herrmann

Tutorial Content-Management-System (CMS) - “TinyMCE” - für NetObjects Fusion. Hier alle Skripte auf einer Seite.


Diesen Editor könnt Ihr Euch auf der Seite von “TinyMCE” downloaden:

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” im Forum 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.

Dieses Tutorial unterscheidet sich von meinem Tutorial 1 darin, dass sämtliche benötigten Skripte nur auf einer Seite eingebaut sind. Ihr benötigt also im Prinzip nur diese eine Seite “admin.php” sowie die Include-Befehle zum Einbau. Entscheidet selbst, welche Version Euch besser gefällt.

Lest bitte zunächst auch mein Tutorial 1 und ladet Euch dort auch die Skripte von “TinyMCE” herunter. Dieses Tutorial ist auf das “Eine-Seite-Konzept” für die Skripte verkürzt und baut auf meinem Tutorial 1 auf.

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 downloaden.

Letzte Änderung am 18.10.2011
Download Vorlage “Eine-Seite-Konzept” ab NOF 12 Update 1. Downloads insgesamt seit dem 14.10.2011: 109

Seiten mit inkludierten Text-Dateien

Alle Seiten, die inkludierte Texte zeigen sollen, sowie die hier beschriebene Seite “admin.php”, 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.

Im Gegensatz zu meinem anderen Tutorial und meiner anderen Vorlage habe ich hier, anstelle von Layout-Bereichen, Text-Felder zum Einbau des
INCLUDE-Befehls verwendet.

Nun zieht Ihr Euch ein neues Text-Feld 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” dieses Projektes. 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 ...


> Text-Feld aufziehen und mit Doppelklick aktivieren > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen.

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

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

Erstellt Euch bitte diese Administrator-Seite mit der Dateierweiterung .php - hier “admin.php”.

Zunächst klickt Ihr auf das Layout dieser Seite und fügt den Code unten am Beginn der Seite ein. Dabei bitte oben keine Leerzeile frei lassen.

> auf Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > Code ganz oben einfügen “Beginn der Seite”

<?php
  
   if (!empty($_POST['Dateiname']))
   {
   if (get_magic_quotes_gpc())
         file_put_contents($_POST['Dateiname'], stripslashes($_POST['MehrzeiligesEingabefeld1']));
      else
         file_put_contents($_POST['Dateiname'], $_POST['MehrzeiligesEingabefeld1']);
   }
  
   if (empty($_GET['Dateiname'])) $_GET['Dateiname'] = '../assets/texte/Dummy-Text.txt';
  
?>

... im Skript oben wird in der ersten IF-Bedingung geguckt, ob bereits eine POST-Variable für die Auswahl der zu ändernden Texte existiert. Falls nicht, wird die Text-Datei “Dummy-Text.txt” geöffnet. Dies ist immer beim ersten Aufruf der Seite “Admin” der Fall und auch beim Abspeichern durch den Editor, da ja zum Zeitpunkt des Aufrufes dieser Seite noch keine URL gewählt wurde und daher auch noch keine POST-Variable existiert. Daher müsst Ihr Euch diese Text-Datei (Dummy-Text.txt) auch erstellen und in das Verzeichnis “texte” kopieren. In meiner “Vorlage” (oben) ist das bereits alles mit eingebaut.

... als nächstes zieht Ihr Euch, für die Auswahl der zu ändernden Texte, ein Textfeld auf (in meinem anderen Tutorial verwende ich dafür Layout-Bereiche).

Die Text-Dateien werden in einer “foreach” Schleife im Skript unten erkannt. Das Skript gehört dann in der Seite “Admin” in die HTML dieses Textfeldes und wird sämtliche vorhandenen TXT-Dateien aus dem Verzeichnis “texte” als Link auflisten und belegt die gewählte Text-Datei mit der Variable “$Dateiname”.

> Text-Feld aufziehen und mit Doppelklick aktivieren > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen.

<?php

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

?>

... jetzt zieht Ihr Euch 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 am  “Beginn der Seite” 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']); ?>

... dann klickt Ihr auf den 2. Button “Allgemeine Formulareigenschaften” und gebt bei “Aktion:” diese Seite (admin.php) mit der
korrekten relativen Pfadangabe an, hier

./admin.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'] ?>

... nun fügt Ihr noch, wie in meinem anderen Tutorial bereits beschrieben und dargestellt, das gleiche TinyMCE-Skript “Zwischen Head Tags” in die HTML des Layouts der Seite “admin.php” ein.



Diese Form, zum Einbau der Skripte auf einer Seite, ist vielleicht noch etwas “eleganter” als die auf meiner anderen Tutorial Seite beschriebene Möglichkeit.

nach oben

Viel Erfolg!