Contao Community Documentation - Benutzerbeiträge [de]

Die erste Webseite

2010-07-19T21:19:59Z

Hanuman: /* Stylesheets */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit 2 vertikalen Spalten, einen Header und einem Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: mittig zentriert
*Höhe der Kopfzeile: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden soll, macht man einen weiteren Unterordner namens theme. Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigte Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes wird neben dem Namen des Themes und des Autors auch die Ordner angegeben, wo sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Wenn man das neu erstellte Theme nun speichert, sieht man in der Theme-Manager Übersicht das neue Theme. Hier werden jetzt die noch fehlenden Komponenten anhand der einzelnen Buttons recht sichtbar.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Als Erstes erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-19T21:18:55Z

Hanuman: /* Stylesheets */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit 2 vertikalen Spalten, einen Header und einem Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: mittig zentriert
*Höhe der Kopfzeile: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden soll, macht man einen weiteren Unterordner namens theme. Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigte Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes wird neben dem Namen des Themes und des Autors auch die Ordner angegeben, wo sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Wenn man das neu erstellte Theme nun speichert, sieht man in der Theme-Manager Übersicht das neue Theme. Hier werden jetzt die noch fehlenden Komponenten anhand der einzelnen Buttons recht sichtbar.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Als Erstes erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.
Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

CSS

2010-07-19T21:12:26Z

Hanuman: /* Spezialdatei basic.css */

{{AppliesTo|TLVersion=Alle Versionen|Version=ab 2.9}}
[[Category:Admin_HOWTOS]]
Man hat in Contao 2 Möglichkeiten, wie man CSS (Cascading Stylesheet) einbindet.

==Eigene CSS-Dateien verwenden==
Wer lieber mit einem Editor als mit dem Framework arbeitet, kann selbst seine eigenen CSS-Dateien anlegen und verwalten. Dazu müssen die verwendeten CSS-Dateien einfach per FTP in einen Ordner (z.B /tl_files/css/) hochgeladen werden. Diese Dateien werden dann im Contao-Backend im Bereich "Seitenlayout" im entsprechenden Layout unter dem Punkt "Experten-Einstellungen --> zusätzliche <head>-Tags" mit folgendem Code eingebunden:
<pre><link media="screen" type="text/css" href="tl_files/css/dateiname.css" rel="stylesheet"></pre>

{{Achtung|Prinzipiell können die Dateien überall abgelegt werden. Wenn man sie jedoch in das Root-Verzeichnis ablegt, werden sie von Contao automatisch gelöscht.}}
Es gibt 2 Möglichkeiten, dem entgegenzuwirken. Entweder man legt die Dateien in einem anderen Verzeichnis ab (z.B. /tl_files/ oder /css/) oder man sagt Contao, dass es die CSS-Dateien nicht anrühren soll. Dies geschieht mit folgendem Eintrag in der Datei /system/config/dcaconfig.php
<pre>
$GLOBALS['TL_CONFIG']['rootFiles'][] = 'dateiname.css';
</pre>
Jede angelegte CSS-Datei benötigt einen Eintrag.
==CSS mit dem Contao-Framework==
Die zweite Möglichkeit, Stylesheets zu erstellen, ist über das Contao-Framework. Zu finden ist dieser Bereich im Backend unter Layout --> Stylesheets. Auch hier ist es möglich, mehrere Stylesheets zu erstellen.

[[Datei:be_css.jpg|Contao Stylesheet Editor]]

Im Kopfbereich der Stylesheet-Übersicht kann man die Stylesheets nach verschiedenen Kriterien und Suchoptionen filtern. Über den Button ''Neues Stylesheet'' legt man eine neue CSS-Datei an. Im nachfolgendem Formular kann man den Namen der CSS-Datei und den Medientyp definieren. Optional kann man auch [[w:de:Conditional_Comments|Conditional Comments]] für den Internet Explorer von Microsoft festlegen.

[[Datei:be_css_edit_1.jpg|Neues Stylesheet erstellen]]

Danach kann mit dem Erstellen der Selektoren und deren Formatierungen begonnen werden.

'''Wichtig:''' Die erstellten Stylesheets müssen dann auch im Backend unter ''Seitenlayout'' dem entsprechenden Layout zugewiesen werden.

[[Datei:be_css_seitenlayout.jpg|CSS im Seitenlayout einbinden]]
===Selbsterstellte Stylesheets in das Framework importieren===
Das Framework bietet auch die Möglichkeit, selbst erstellte Stylesheets in das Framework zu importieren. Dazu muss die vorher erstellte CSS-Datei per FTP nach /tl_files/ hochgeladen werden. Anschliessend kann man diese im Backend --> Layout --> Stylesheets über den Button ''CSS-Impport'' importieren.

[[Datei:be_css.jpg|Contao Stylesheet Editor]]

==Mischform aus eigenen und Contao Stylesheets==
Es ist auch möglich, beide Möglichkeiten zu kombinieren. Es ist aber anzuraten, sich für eine Version zu entscheiden, da sonst sehr schnell die Übersicht verloren geht.

==Spezialdatei basic.css==
Während bis Conatao 2.9.0 die CSS Datei basic.css vom TinyMCE für die Formatierung von Inhalten herangezogen wurde, ist diese Datei seit 2.9.0 nicht mehr standardmäßig eingebunden. Siehe auch [[TinyMCE]].

==Spezialdatei newsletter.css==
Die CSS Datei newsletter.css stelllt in Contao einen Spezialfall dar. Diese Datei wird vom Contao für die Formatierung von [[newsletter|Newslettern]] mittels Inline-CSS herangezogen.

CSS

2010-07-19T21:11:52Z

Hanuman: /* Spezialdatei basic.css */

{{AppliesTo|TLVersion=Alle Versionen|Version=ab 2.9}}
[[Category:Admin_HOWTOS]]
Man hat in Contao 2 Möglichkeiten, wie man CSS (Cascading Stylesheet) einbindet.

==Eigene CSS-Dateien verwenden==
Wer lieber mit einem Editor als mit dem Framework arbeitet, kann selbst seine eigenen CSS-Dateien anlegen und verwalten. Dazu müssen die verwendeten CSS-Dateien einfach per FTP in einen Ordner (z.B /tl_files/css/) hochgeladen werden. Diese Dateien werden dann im Contao-Backend im Bereich "Seitenlayout" im entsprechenden Layout unter dem Punkt "Experten-Einstellungen --> zusätzliche <head>-Tags" mit folgendem Code eingebunden:
<pre><link media="screen" type="text/css" href="tl_files/css/dateiname.css" rel="stylesheet"></pre>

{{Achtung|Prinzipiell können die Dateien überall abgelegt werden. Wenn man sie jedoch in das Root-Verzeichnis ablegt, werden sie von Contao automatisch gelöscht.}}
Es gibt 2 Möglichkeiten, dem entgegenzuwirken. Entweder man legt die Dateien in einem anderen Verzeichnis ab (z.B. /tl_files/ oder /css/) oder man sagt Contao, dass es die CSS-Dateien nicht anrühren soll. Dies geschieht mit folgendem Eintrag in der Datei /system/config/dcaconfig.php
<pre>
$GLOBALS['TL_CONFIG']['rootFiles'][] = 'dateiname.css';
</pre>
Jede angelegte CSS-Datei benötigt einen Eintrag.
==CSS mit dem Contao-Framework==
Die zweite Möglichkeit, Stylesheets zu erstellen, ist über das Contao-Framework. Zu finden ist dieser Bereich im Backend unter Layout --> Stylesheets. Auch hier ist es möglich, mehrere Stylesheets zu erstellen.

[[Datei:be_css.jpg|Contao Stylesheet Editor]]

Im Kopfbereich der Stylesheet-Übersicht kann man die Stylesheets nach verschiedenen Kriterien und Suchoptionen filtern. Über den Button ''Neues Stylesheet'' legt man eine neue CSS-Datei an. Im nachfolgendem Formular kann man den Namen der CSS-Datei und den Medientyp definieren. Optional kann man auch [[w:de:Conditional_Comments|Conditional Comments]] für den Internet Explorer von Microsoft festlegen.

[[Datei:be_css_edit_1.jpg|Neues Stylesheet erstellen]]

Danach kann mit dem Erstellen der Selektoren und deren Formatierungen begonnen werden.

'''Wichtig:''' Die erstellten Stylesheets müssen dann auch im Backend unter ''Seitenlayout'' dem entsprechenden Layout zugewiesen werden.

[[Datei:be_css_seitenlayout.jpg|CSS im Seitenlayout einbinden]]
===Selbsterstellte Stylesheets in das Framework importieren===
Das Framework bietet auch die Möglichkeit, selbst erstellte Stylesheets in das Framework zu importieren. Dazu muss die vorher erstellte CSS-Datei per FTP nach /tl_files/ hochgeladen werden. Anschliessend kann man diese im Backend --> Layout --> Stylesheets über den Button ''CSS-Impport'' importieren.

[[Datei:be_css.jpg|Contao Stylesheet Editor]]

==Mischform aus eigenen und Contao Stylesheets==
Es ist auch möglich, beide Möglichkeiten zu kombinieren. Es ist aber anzuraten, sich für eine Version zu entscheiden, da sonst sehr schnell die Übersicht verloren geht.

==Spezialdatei basic.css==
Während bis Conatao 2.9.0 die CSS Datei basic.css vom TinyMCE für die Formatierung von Inhalten herangezogen wurde, ist diese Datei nicht mehr standardmäßig eingebunden. Siehe auch [[TinyMCE]].

==Spezialdatei newsletter.css==
Die CSS Datei newsletter.css stelllt in Contao einen Spezialfall dar. Diese Datei wird vom Contao für die Formatierung von [[newsletter|Newslettern]] mittels Inline-CSS herangezogen.

TinyMCE

2010-07-11T22:19:12Z

Hanuman: /* TinyMCE - Contao - basic.css */

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyMCE_custom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyMCE_custom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

[http://www.contao-community.de/showthread.php?10392-TinyMCE-einzelne-Felder-ausblenden&highlight=tinymce Siehe auch MacKP im Forum zu diesem Thema]

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyMCE_custom.php umbenannt
#system/config/tinyMCE_custom.php kann nun editiert werden.

Damit die tinyMCE_custom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyMCE_custom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyMCE_custom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinyMCE_custom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyMCE_custom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

==Quellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]

[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]

[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Richt-Text-Editor einsetzt]

TinyMCE

2010-07-11T21:28:52Z

Hanuman: /* Funktionen im TinyMCE anpassen */

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyMCE_custom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyMCE_custom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

[http://www.contao-community.de/showthread.php?10392-TinyMCE-einzelne-Felder-ausblenden&highlight=tinymce Siehe auch MacKP im Forum zu diesem Thema]

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyMCE_custom.php umbenannt
#system/config/tinyMCE_custom.php kann nun editiert werden.

Damit die tinyMCE_custom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyMCE_custom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight - 2.8.3 geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyMCE_custom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinyMCE_custom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyMCE_custom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

==Quellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]

[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]

[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Richt-Text-Editor einsetzt]

TinyMCE

2010-07-11T21:24:36Z

Hanuman: /* Updatesicheres anpassen der system/config/tinyMCE.php */

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyMCE_custom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyMCE_custom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

[http://www.contao-community.de/showthread.php?10392-TinyMCE-einzelne-Felder-ausblenden&highlight=tinymce Siehe auch MacKP im Forum zu diesem Thema]

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyMCE_custom.php umbenannt
#system/config/tinyMCE_custom.php kann nun editiert werden.

Damit die tinyMCE_custom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyMCE_custom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight - 2.8.3 geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyCustom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinymceCustom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyCustom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

==Quellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]

[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]

[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Richt-Text-Editor einsetzt]

TinyMCE

2010-07-11T21:21:04Z

Hanuman: /* Ideenquellenangaben */

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyMCE_custom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyMCE_custom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

[http://www.contao-community.de/showthread.php?10392-TinyMCE-einzelne-Felder-ausblenden&highlight=tinymce Siehe auch MacKP im Forum zu diesem Thema]

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyCustom.php umbenannt
#system/config/tinyCustom.php kann nun editiert werden.

Damit die tinyCustom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyCustom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight - 2.8.3 geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyCustom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinymceCustom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyCustom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

==Quellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]

[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]

[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Richt-Text-Editor einsetzt]

TinyMCE

2010-07-11T21:20:30Z

Hanuman: /* TinyMCE-Dateien in Contao */

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyMCE_custom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyMCE_custom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

[http://www.contao-community.de/showthread.php?10392-TinyMCE-einzelne-Felder-ausblenden&highlight=tinymce Siehe auch MacKP im Forum zu diesem Thema]

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyCustom.php umbenannt
#system/config/tinyCustom.php kann nun editiert werden.

Damit die tinyCustom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyCustom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight - 2.8.3 geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyCustom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinymceCustom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyCustom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

==Ideenquellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]

[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]

[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Richt-Text-Editor einsetzt]

TinyMCE

2010-07-11T13:10:14Z

Hanuman: /* Ideenquellenangaben */

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyCustom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyCustom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

{{Achtung|Stimmt das mit der Updatesicherheit? Bitte um Bestätigung, damit diese Warnung entfernt werden kann.}}

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyCustom.php umbenannt
#system/config/tinyCustom.php kann nun editiert werden.

Damit die tinyCustom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyCustom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight - 2.8.3 geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyCustom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinymceCustom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyCustom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

==Ideenquellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]

[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]

[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Richt-Text-Editor einsetzt]

TinyMCE

2010-07-11T13:09:55Z

Hanuman:

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyCustom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyCustom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

{{Achtung|Stimmt das mit der Updatesicherheit? Bitte um Bestätigung, damit diese Warnung entfernt werden kann.}}

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyCustom.php umbenannt
#system/config/tinyCustom.php kann nun editiert werden.

Damit die tinyCustom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyCustom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight - 2.8.3 geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyCustom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinymceCustom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyCustom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

==Ideenquellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]
[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Richt-Text-Editor einsetzt]

TinyMCE

2010-07-11T12:59:28Z

Hanuman: Die Seite wurde neu angelegt: „{{AppliesTo |Version=2.9.0 }} Category:Admin HOWTOS {{stub}} =TinyMCE in Cantao= ==Unterschiede Typolight - Contao== Während in Typolight automatisch die bas…“

{{AppliesTo
|Version=2.9.0
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Cantao=
==Unterschiede Typolight - Contao==
Während in Typolight automatisch die basic.css vom tinyMCE eingebunden wurde,
#definierte Klassen konnten im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der basic.css wurden im Editor ebenfalls formatiert dargestellt

wird die '''basic.css in Contao nicht mehr standardmäßig eingebunden'''.

Stattdessen gibt es seit Contao die Datei tl_files/tinymce.css.
#hier definierte Klassen können im Editor im Format DropDownMenu ausgewählt werden
#Styles aus der tl_files/tinymce.css werden im Editor ebenfalls formatiert angezeigt
#dieses Stylesheet wird im auch im Frontend eingebunden (default)
{{Hinweis|Im Layout kann aber auch eingestellt werden, dass diese Datei für das Frontend ignoriert wird.}}

==TinyMCE-Dateien in Contao==
#tl_files/tinymce.css
#system/themes/tinymce.css
#system/config/tinyMCE.php

'''tl_files/tinymce.css''' - Frontend und Formatierung im Texteditor
*Diese Datei wird per default sowohl im Frontend, als auch im Texteditor im Backend benutzt.
*Die definierten Styles werden im Frontend durch weitere Anweisungen in den Stylesheets der Themes überschrieben.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert (Datei wird im Frontend ignoriert) werden.

*Die definierten Styles werden direkt im Texteditor umgesetzt und entsprechend ausgezeichnete Elemente werden im *Texteditor formatiert angezeigt.
*Die definierten Klassen werden im Texteditor als DropDownMenu zur Auswahl gestellt.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default in tinyMCE.php in den Texteditor geladen.
*Hier gemachte Styles werden für die Formatierung des Texteditorinhaltes genutzt.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei unter Umständen bei einem Update ebenfalls geupdated wird.

'''Individuelle Einstellungen in der system/config/tinyMCE.php kann man updatesicher abspeichern:'''
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyCustom.php'''
#Contao in der system/config/dcaconfig.php mitteilen, dass die tinyCustom.php benutzt werden soll
#Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart

Eintrag in der system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

{{Achtung|Stimmt das mit der Updatesicherheit? Bitte um Bestätigung, damit diese Warnung entfernt werden kann.}}

=mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im Backend von Contao direkt im TinyMCE mit CSS-Klassen arbeiten zu können ohne in den Quellcode gehen zu müssen, kann man die Datei tl_files/tinymce.css bearbeiten.

Klassen, die hier definiert werden, können direkt im TinyMCE ausgewählt werden.

[[Datei:Tl_files_tinymce-css.png‎|Die CSS-Datei tl_files/tinymce.css]]

{{Hinweis|Die Angabe der Id #raute wird '''nicht''' in dem DropDownMenu angezeigt.}}

[[Datei:Tinymce-klassenauswahl.png|Ansicht des TinyMce im Backend]]

Elemente, die man nun mit diesen Klassen auszeichnet, werden im Editor und im Frontend entsprechend formatiert.

Jeden dieser Styles kann man in einem anderen Stylesheet der jeweiligen Seite wieder überschreiben.
[[Datei:Tinyklassen-frontend.png|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css auch in jedem Seitenlayout auch ignoriert werden.
[[Datei:Tinymce-css-ignorieren.png|Einstellungsmöglichkeit im Seitenlayout]]

{{Achtung|Wenn man in einem Layout eingestellt hat, dass die tl_files/tinymce.css ignoriert wird, dann stehen die definierten Klassen zwar weiterhin im Editor zur Verfügung (dropdown - Format) und werden auch entsprechend gestyled angezeigt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

=TinyMCE anpassen=

==Updatesicheres anpassen der system/config/tinyMCE.php==

{{Hinweis|Änderungen in der tinyMCE.php sind nicht updatesicher}}

Um updatesicher Anpassungen vornehmen zu können, kann man folgenden Weg gehen:
#system/config/tinyMCE.php wird dupliziert und in tinyCustom.php umbenannt
#system/config/tinyCustom.php kann nun editiert werden.

Damit die tinyCustom.php (anstatt der tinyMCE.php) dann auch benutzt wird, kann updatesicher folgender Eintrag in der system/config/dcaconfig.php vorgenommen werden:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

Nun wird für den Texteditor im Backend nicht mehr die Original-Einstellungsdatei eingebunden, sondern die neu angelegte Datei tinyCustom.php

==TinyMCE - Contao - basic.css==
{{Hinweis|In früheren Versionen (Typolight) wurde automatisch die basic.css (sofern diese vorhanden war) eingebunden. Dadurch gab es die in der basic.css definierten Klassen im Editor zur Auswahl und die Styles wurde auch im Editor angewendet.}}

Nina hat hier auch einen schönen Beitrag über Typolight - 2.8.3 geschrieben - inklusive Beispiel basic.css als Reset-Stylesheet.
[http://www.contao.org/blog-leser/items/wie-man-die-basiccss-fuer-den-rich-text-editor-einsetzt.html Wie man die basic.css für den Rich Text Editor einsetzt]

Wenn weiterhin die basic.css für den TinyMCE benutzt werden soll, kann man dem Editor natürlich auch wieder mitteilen, dass er das soll.

Hinzufügen der basic.css zum Texteditor in der tinyCustom.php:

content_css : "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH;?>/basic.css,<?php echo TL_PATH .'/'. $this->uploadPath; ?>/tinymce.css",

Nun werden Angaben aus der basic.css im Texteditor benutzt (und im Frontend, sofern die basic.css für das Frontend ausgewählt wurde).

{{Hinweis|Hierbei ist zu bedenken, das es bei Contao nun nicht mehr eine basic.css gibt, die auf jeder Seite eingebunden werden kann, da nur in einem Theme eine basic.css erstellt werden kann.}}

Oder man speichert die Styles aus dem basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja nun ebenfalls vom Frontend als auch vom TinyMCE benutzt.

Allerdings kann dieses Stylesheet nicht über den Stylesheetgenerator von Contao bearbeitet werden.

Aber gibt es da nicht auch eine Erweiterung?

==Funktionen im TinyMCE anpassen==
Die tinyMCE.php (bzw. wie im Beispiel die tinyCustom.php) bietet ebenfalls eine interessante Möglichkeit um das Erscheinungsbild des Editors anzupassen.
Hier können die angezeigten Funktionen eingeschränkt werden, um nie verwendete (bzw. nicht zu verwendende) Funktionen zu deaktivieren.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png]]

'''Quellcodeauszug aus der tinyMCE.php'''
theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,separator,undo,redo,separator,removeformat,cleanup,separator,code",
theme_advanced_buttons2 : "formatselect,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,separator,template,separator,charmap,emotions,separator,help"

'''In der /system/config/tinymceCustom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png]]

'''Quellcodeauszug aus der tinyCustom.php'''
theme_advanced_buttons1 : "code,removeformat,separator,typolinks,unlink,separator,image,typobox,separator,sup,separator,formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,separator,forecolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

Datei:Tinymce-angepasst.png

2010-07-11T09:16:00Z

Hanuman:

Datei:Tinymce-standard.png

2010-07-11T09:15:15Z

Hanuman:

Datei:Tinymce-css-ignorieren.png

2010-07-11T08:57:51Z

Hanuman:

Datei:Tinymce-klassenauswahl.png

2010-07-11T08:53:04Z

Hanuman: hat eine neue Version von „Datei:Tinymce-klassenauswahl.png“ hochgeladen: Zurückgesetzt auf die Version vom 11. Juli 2010, 08:30 Uhr

Datei:Tinymce-klassenauswahl.png

2010-07-11T08:51:14Z

Hanuman: hat eine neue Version von „Datei:Tinymce-klassenauswahl.png“ hochgeladen

Datei:Tinyklassen-frontend.png

2010-07-11T08:34:17Z

Hanuman:

Datei:Tinymce-klassenauswahl.png

2010-07-11T08:30:24Z

Hanuman:

Datei:Tl files tinymce-css.png

2010-07-11T08:18:22Z

Hanuman: