Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
CMS: Einbau des Online Editors TinyMCE in NOF
#1
Tutorial: Einbau des CMS Systems TinyMCE in eine NOF Site:

Die Anwendung erfordert PHP 5.

In der Anleitung geht es um die Einbindung des Online Editors TinyMCE,
der es ermöglicht, ohne NOF direkt über den Browser den Inhalt
einer NetObjects Fusion Website zu verändern.

Eine Anwendung ist z.B., dass der Webmaster eines Vereins am Samstag
schnell direkt über einen Browser die Spielergebnisse in die Site eintragen
kann, ohne das er erst zu Hause am PC die Seite in NOF ändern und neu
hochladen muß.

Auf der Seite des Herstellers kann man sich einen ersten Eindruck über
die Leistungsfähigkeit des Editors verschaffen.

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

Lizenzbedingungen werden hier beschrieben:

http://www.tinymce.com/js/tinymce/jscrip...icense.txt

Die Anleitung ist bewusst für Profis gedacht die sich mit NOF sehr gut
auskennen und nur noch einen kleinen Stubs benötigen wie man den
Editor schnell und ohne viel lesen einbinden kann.

Allgemeine Beschreibung des Editors:

Der TinyMCE ist eine "Sammlung" von vielen Javascripten in vielen
Unterverzeichnissen. Die Integration in eine Seite erfolgt durch einen
"Skriptblock" der in den Head der Seite kopiert wird.

Der Editor selber kann nur den Inhalt einer TextArea (Feld) in einem
Formular ändern.

Die Aufgabe eine (wie auch immer) ausgewählte Seite in diese TextArea
zu laden und nach dem Bearbeiten durch den Editor wieder zu speichern
müssen wir ihm abnehmen.

Vorgehen allgemein:

In NOF selber werden Seiten deren Inhalt veränderbar sein soll als ganz
normale Seiten - allerdings mit der Endung .php - angelegt.

Auf diesen Seiten wird an der Position an der der veränderbare Text
angezeigt werden soll ein Layoutbereich eingefügt. An dieser Stelle wird
in das HTML des Layoutbereiches ein PHP Include eingefügt.

D.h. die Veränderbarkeit der Seite wir durch das "Includen" einer .txt Datei realisiert.

Für die Editorfunktion benötigt man dann insgesamt 3 Seiten.
  • Eine Seite auf der man die .txt die geändert werden soll auswählen kann,
  • eine Seite mit dem Editor wo die .txt (online) bearbeitet werden kann,
  • und dann noch eine Seite die die Änderungen speichert.


Beispielprojekt und Einbauanleitung.

Die Anleitung wurde für eine Publizierungsstruktur nach Assets ausgelegt!

Die Texte befinden sich im Verzeichnis assets/texte (Siehe Anleitung weiter unten - Textdateien erstellen).

Die Site (Verein) soll neben der üblichen Home drei veränderbare Seiten
und die drei Seiten für den Editor erhalten:
  • Home
  • Aktuelles
  • Spielergebnisse
  • Termine
  • Auswahl
  • Ändern
  • Speichern



.jpg  Seitenaufteilung-cms.jpg (Größe: 89,87 KB / Downloads: 194)


Nachdem die Publizierungsstruktur auf "nach Assets" umgestellt wurde
wird die Endung aller Seiten auf .php eingestellt (Site-Ansicht > Seite
aktivieren > im Eigenschaftsfenster "benutzerdefinierte Namen" anklicken
> im Menü Seitenendung .php auswählen).

Über Publizieren wird der Ordner tinymce erstellt und die 3 Seiten
Auswahl, Ändern und Speichern aus html ausgeschnitten und in tinymce
eingefügt. Wer mit diesem Vorgang nicht vertraut ist, kann hier nachschauen:

http://www.tommyherrmanndesign.com/nof/h...tml#ordner

Seiten mit CMS-Texten:

Auf den Seiten Aktuelles, Spielergebnisse, Termine wird jeweils ein
Layoutbereich eingefügt und dort in das HTML der Seite der PHP Code
für das Include eingetragen.

Also

PHP-Code:
<?php include('../assets/texte/text1.txt'); ?>
bzw.
PHP-Code:
<?php include('../assets/texte/text2.txt'); ?>
bzw.
PHP-Code:
<?php include('../assets/texte/text3.txt'); ?>



.jpg  include-eingeben.jpg (Größe: 108,22 KB / Downloads: 118)


Seite "auswahl"

Auf der Seite Auswahl wird auch ein Layoutbereich eingefügt und in das
HTML der folgende PHP Code eingetragen.

PHP-Code:
<?php

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

Der PHP Code erzeugt eine Liste aller .txt Dateien die sich im Verzeichnis
assets/texte befinden mit den passenden Links die auf die Ändernseite führen.


.jpg  include-seite-asuwahl.jpg (Größe: 93,4 KB / Downloads: 62)


Bitte prüfen ob NOF die Seite Ändern auch bei Publizieren mit andern.php
erstellt hat da sonst der Link nicht funktioniert.

Seite "speichern"

Auf der Seite Speichern wird im Layoutbereich ein "Text" eingefügt und in
das HTML kommt der PHP Code:

PHP-Code:
<?php

if (get_magic_quotes_gpc())
  
file_put_contents($_POST['Dateiname'], stripslashes($_POST['MehrzeiligesEingabefeld1']));
 else
  
file_put_contents($_POST['Dateiname'], $_POST['MehrzeiligesEingabefeld1']);

?>


.jpg  objekt-php.jpg (Größe: 109,81 KB / Downloads: 74)


Der Code funktioniert nur wenn die TextArea die wir gleich auf der Ändernseite erstellen den Namen "MehrzeiligesEingabefeld1" hat.

Seite "ändern"

Auf die Seite Ändern kommt jetzt ein etwas größeres Formular und dort
hinein ein größeres "Mehrzeiliges Eingabefeld".

"Größeres" deswegen weil in dem Eingabefeld der Inhalt der ganzen Seite
die editiert werden soll angezeigt wird.

Das "Mehrzeilige Eingabefeld" muss den Namen MehrzeiligesEingabefeld1
erhalten da das Skript zum Speichern der Änderungen sonst nicht die
richtigen Daten speichern kann.

In den Text (Vorbelegung des Feldes) des "Mehrzeiligen Eingabefeldes"
gibt man den folgenden PHP Code ein:

PHP-Code:
<?php echo file_get_contents($_GET['Dateiname']); ?>


.jpg  eingabefeld.jpg (Größe: 96,97 KB / Downloads: 84)


Mit dem PHP Code wird die TextArea mit dem Inhalt aus der Datei die
geändert werden soll gefüllt.

Als Aktion des Formulars wird die Seite ./speichern.php
angegeben.


.jpg  formular-aktion.jpg (Größe: 40,31 KB / Downloads: 99)


Bitte unter Publizieren prüfen ob die Speichernseite den Dateinamen
speichern.php von NOF bekommen hat.


Von der Auswahlseite bekommt die Ändernseite über den Link den
Dateinamen der Seite die sie ändern soll.

Damit die Speichernseite denn auch kennt muß man den "durchschleifen",
d.h. man fügt auf der Ändernseite im Formular das verdeckte Feld mit
dem Namen Dateiname und dem Wert

PHP-Code:
<?php echo $_GET['Dateiname'?>

ein.

So wird auf der Ändernseite das verdeckte Feld Dateiname mit dem
Dateinamen vom Link der Auswahlseite gefüllt und dieser dann auch an
die Speichernseite weiter gegeben. (Eingabefeld im letzten Screenshot zu sehen)

Datei herunterladen

Für den TinyMCE wird die Datei TinyMCE 3.4.6 von der Herstellerseite
geladen und in ein TempVerzeichnis entpackt.

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

Um den TinyMCE in die Ändernseite zu integrieren wird der (Skript) Teil
zwischen den Markierungen

Code:
<!-- TinyMCE -->

und

Code:
<!-- /TinyMCE -->

aus der Datei full.html die sich im Verzeichnis TempVerzeichnis\tinymce\examples\
befindet kopiert und in den Head der Ändernseite (Layout, nicht in den Masterborder) eingefügt.

Abbildung hier.

Die Zeile

Code:
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

davon muss nach

Code:
<script type="text/javascript" src="./jscripts/tiny_mce/tiny_mce.js"></script>

geändert werden.


Der Eintrag

Code:
        content_css : "css/content.css",

muß nach z.B.

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

geändert werden damit alle 3 CSS der Site wie sie auch von NOF
verwendet werden im Editor zur Verfügung stehen.

Damit die richtigen Styles die im Editor angezeigt werden muss der Block zwischen

Code:
        // Style formats

und

Code:
        // Replace values for the template plugin

komplett gelöscht werden.


TinyMCE-Verzeichnis hochladen

Jetzt wird das komplette Verzeichnis tinymce (entpackte ZIP von
TinyMCE) auf den Server in ein geschütztes Testverzeichnis per FTP
hochgeladen.

D.h. direkt auf den Server in dem geschützten Testverzeichnis liegt jetzt
das Verzeichnis tinymce und in dem die Verzeichnisse examples und
jscripts und die Datei changelog.txt.

Verzeichnis TinyMCE:


.jpg  verzeichnis1.JPG (Größe: 31,82 KB / Downloads: 92)


Inhalte des Verzeichnisses


.jpg  verzeichnis2.JPG (Größe: 36,77 KB / Downloads: 72)


Die NOF Site wird jetzt in das geschützte Testverzeichnis publiziert.

Textdateien erstellen

Danach erstellen wir mit einem FTP Programm in dem geschützten
Testverzeichnis in dem Verzeichnis assets das Verzeichnis texte.
In dieses laden wir 3 leere Textdateien mit den Namen text1.txt, text2.txt und text3.txt (für jede CMS-Seite eine Textdatei) hoch.

Zum Testen soweit fertig!


Die Seiten Ändern und Speichern dürfen natürlich nicht direkt
sondern nur über die Auswahlseite aufgerufen werden können
da sie ja sonst nicht wissen welche Datei bearbeitet werden soll.

Masterborder und Navi so einstellen, dass die Seiten zum Editieren nicht
für jeden sichtbar sind und das Verzeichnis tinymce so schützen das nur
der Webmaster in das Verzeichnis kommt wenn sich die Site später
außerhalb des Testverzeichnisses befindet nicht vergessen!

Die Sprache auf DE umstellen und ggf. einen Bildupload integrieren (da
gibt es Plugins) dürfte jetzt für den "Profi" keine Probleme bereiten.

Auf jeden Fall gilt das nur der Domainbesitzer/Webmaster an den
Editor+Verzeichnis tinymce "rankommen" darf - da derjenige der den
TinyMCE verwenden kann auch den ganzen Hostingaccount mit den
Skripten "übernehmen" kann.

Also nicht jeden beliebigen in das Verzeichnis tinymce lassen!

Wer noch sicherstellen möchte das Suchmaschinen die .txt Dateien im
Verzeichnis assets/texte nicht ohne ihre zugehörigen .php Seiten finden
kann das Verzeichnis texte vor dem Zugriff schützen (Kundenmenü/.htaccess).

Einige Funktionen des TinyMCE wie "Smiley einfügen" können ohne weitere
Konfiguration nicht verwendet werden, die Anleitungen des TinyMCE
Herstellers helfen hier weiter.


Edit: Alle Bilder zu diesem Tutorial wurden von barbara0701 eingefügt
Alle Beiträge dieses Benutzers finden
#2
Hier ist eine Vorlage für NOF12, zum "Spielen" - ohne Gewähr.

Ihr könnt die Vorlage in euer bestehendes Projekt einfügen (Sie Ansicht, Vorlage importieren).

Nach dem Importieren die Felder aus den CMS-Seiten (z.B. "verein") in eure eigenen Seite einfügen.

Nicht vergessen: Seite auf .php umzustellen!

Unbenutze Seiten wie Home einfach löschen.


Angehängte Dateien
.zip   verein-content-management.zip (Größe: 303,05 KB / Downloads: 52)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#3
Zitat:Um den TinyMCE in die Ändernseite zu integrieren wird der (Skript) Teil
zwischen den Markierungen

Code:
<!-- TinyMCE -->

und

Code:
<!-- /TinyMCE -->

aus der Datei full.html die sich im Verzeichnis TempVerzeichnis\tinymce\examples\
befindet kopiert und in den Head der Ändernseite (Layout, nicht in den Masterborder) eingefügt.

Die Einfügung erfolgt im Layout.HTML Zwischen den headtags:


.jpg  Tiny-script.jpg (Größe: 295,2 KB / Downloads: 66)


Hinweise im Tutorial beachten.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#4
Zusatzinformation 1: Bildupload

Mit dem TinyMCE kann man nur Texte ändern. Für Bildupload benötigt man einen zusätzlichen Uploader. Dazu mehr (vielleicht) zu einem späteren Zeitpunkt.

----------------------------------------------------------------

Zusatzinformation 2: Hintergrund Online Editor

Da die style.css verknüpft ist, erscheint im Eingabeeditor der Hintergrund der Website (Body). Sollte das in Einzelfällen stören, bitte wie folgt umgehen:

Der TinyMCE hat für den Editor auch einen eigenen Body (Klasse), den man zuweisen kann. Einfach folgenden Code verwenden:

Code:
BODY.mceContentBody {
background: #FFF;
}

Diese drei Zeilen in der Designansicht nach der Body-Definition (direkt nach der Stelle wo der Hintergrund sich befindet) im css-Code eintragen.


------------------------------------------------------------

Zusatzinformation 3: Smiley-Bibliothek

Smileys braucht man normalerweise nicht. Für den Fall dass Ihr demnoch smileys einfügen wollt:

Das Plug-In befindet sich im TinyMCE an folgender Stelle:

ROOT\tinymce\jscripts\tiny_mce\plugins\emotions\im​g

Bitte Olugin im Ordner assets/bilder reinkopieren.

Danach den Pfad in der Datei

ROOT\tinymce\jscripts\tiny_mce\plugins\emotions\js​\emotions.js

von

Code:
src : tinyMCEPopup.getWindowArg('plugin_url') + '/img/' + file,

auf

Code:
src : tinyMCEPopup.getWindowArg('plugin_url') + '../../../../../../assets/bilder/' + file,

ändern.

-----------------------------

Alle Angaben ohne Gewähr und nur für den erfahrenen Anwender geeignet.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#5
Nun hat auch Thomas Frei-Herrmann dieses Thema in Angriff genommen und bietet eine komplette .zip-Datei auf seinem Server an:

http://www.tommyherrmanndesign.com/nof/TinyMCE/

Wie immer grandios gemacht...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Thema geschlossen 


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Online Handbuch NetObjects Fusion XII NOF12 barbara0701 1 17.417 15.03.2012, 12:06
Letzter Beitrag: barbara0701



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!