Contao Community Documentation - Benutzerbeiträge [de]

MetaModels Backend: Attribute

2013-09-05T14:08:33Z

Datenkind: /* Langtext (Longtext) */

[[Category:MetaModels|M1]]
=Allgemeines zu den Attributen=
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
# [[MetaModels_Backend:_Eingabemaske| MetaModels Eingabemaske]]
# [[MetaModels_Backend:_Filter| MetaModels Filter]]
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]

==Was sind eigentlich Attribute?==
[[File:icons_attribute.png|left|32px]]
Grob gesagt: die Datenbank-Objekte (aka Datensatz), die in den MetaModels erfasst werden, setzen sich aus den verschiedensten Attributen (aka Eigenschaften oder Feldern) zusammen.
<div style="clear: both"></div>

=Einstieg=
[[File:mm_backend_attribute_liste.png|thumb|365px]]
Über '''Neues Attribut''' erfasst man die gewünschten Attribute. Name und Beschreibung eines Objektes, die Fotos, die das Objekt illustrieren, eine Checkbox, mit der ein Eintrag veröffentlicht werden kann - all das wird in Attributen abgelegt. Jedes Attribut entspricht also einer Spalte in der Datenbank-Tabelle.
Aus den verschiedenen Attributen stellt man die Eingabemaske für die einzelnen Datensätze zusammen. Für jeden Attributtyp gibt es diverse Einstellungen, die im Folgenden beim jeweiligen Attribut erläutert werden.
<div style="clear: both"></div>

==Attribut definieren==
[[File:mm_attribut_settings_eingabemaske.png|thumb|365px]]
Mit einem Klick auf das Icon Bearbeiten fängt man an. Zuerst wird der Attributtyp ausgewählt. Für '''jedes''' Attribut müssen dann '''Basis-Attributkonfigurationen''' festgelegt werden:

* '''Attribut-Typ''': Typ (gesamte Liste siehe weiter unten)
* '''Spaltenname''' (Name der Tabellenspalte in der Datenbank)
* '''Name''' (Name der Feldüberschrift bei der Erfassung des Datensatzes)
* '''Beschreibung''' (Beschreibung unterhalb des Feldes bei der Erfassung des Datensatzes)

Bei allen Attributen findet man unter den '''Erweiterten Einstellungen''' (Advanced settings) noch die Checkbox '''Eindeutige Werte''' (Unique values) - wird diese angehakt, kann für das betreffende Attribut jeder Wert nur einmal verwendet werden.

Den Einträgen, die man unter '''Name''' und '''Beschreibung''' eingibt, begegnet man später in der Eingabemaske wieder (siehe rote Markierung im Screenshot).
<div style="clear: both"></div>

=Attribute=
==Alias==
[[File:mm_attribut_alias.png|thumb|365px]]

Das Attribut '''Alias''' erzeugt ein einzeiliges Eingabefeld. Dieses Attribut sollte erst dann erzeugt werden, wenn mindestens ein Textfeld (vorzugsweise ein Titel-Feld) vorhanden ist, aus dem sich das Alias automatisch bilden kann.

'''Advanced Settings'''
*'''Eindeutige Werte'''
*'''Neuerstellung des Alias erzwingen.''': Anhaken, wenn sich das Alias automatisch anpassen soll, wenn immer der Wert des zugewiesenen Feldes geändert wird (ist etwas buggy, Stand:März 2013)
*'''Alias-Felder''': Attribut, aus dem das Alias generiert wird. Es können auch mehrere Attribute definiert werden. In diesem Fall werden die einzelnen Attribute über einen Bindestrich zu einem Alias zusammengefügt.
<div style="clear: both"></div>

==Auswahl (Select)==

[[File:mm_attribut_select.png|thumb|365px]]
Das Attribut '''Auswahl''' erzeugt ein HTML-Select.

'''Anzeigeeinstellungen'''
* '''select_table''': Hier erscheinen alle in der Contao-Installation verfügbaren Tabellen, auch die mit MetaModels erstellten (siehe Hinweis weiter unten)
* '''select_id''': Vorzugsweise '''id''' auswählen. Standardmässig führt jede Contao-Tabelle eine ID mit
* '''select_column''': Namen der Spalte auswählen, der die Werte des Selects zur Verfügung stellt
* '''select_alias''': Vorzugsweise das '''alias''' auswählen
*'''Auswahl-Sortierung''': Hier lässt sich einstellen, in welcher Reihenfolge die Begriffe im Select erscheinen sollen
*'''SQL''': Die Auswahlmöglichkeiten lassen sich per SQL einschränken

Hinweis: Um das Attribut '''Auswahl''' anlegen zu können, muss man zuerst eine neue Tabelle (sprich ein neues MetaModel) erstellen, in der die Select-Werte angelegt werden.
Die genaue Vorgehensweise ist [[MetaModels_Beispiel_4|hier]] beschrieben. Erst dann kann man unter '''select_table''' die betreffende Tabelle auswählen.

<div style="clear: both"></div>

==Bewertung (Rating)==
[[File:mm_attribut_rating.png|thumb|365px]]
Das Attribut '''Bewertung''' erzeugt eine Aufzählung von Icons. Standardmässig werden Sterne angezeigt. Man kann aber auch eigene definieren.

'''Beispiel'''<br>
[[File:mm_attribut_rating_beispiel.png|link=]]

'''Bitte beachten'''<br>
Das Attribut benötigt die beiden PHP-Dateien '''SimpleAjax.php''' und '''SimpleAjaxFrontend.php''', welche mit dem aktuellen Nightly Build ausgeliefert werden.<br>
Die beiden PHP-Dateien müssen im Root-Verzeichnis der Contao-Installation abgelegt werden.
<div style="clear: both"></div>

==Color picker (Farbe)==
[[File:mm_attribut_color.png|thumb|365px]]
Das Attribut '''Color picker''' erzeugt zwei Eingabefelder (Hex Farbangabe) und einen Farbwähler
<div style="clear: both"></div>

==Datei (File)==
[[File:mm_attribut_datei.png|thumb|365px]]
Das Attribut '''Datei''' erzeugt ein Wurzelverzeichnis, aus dem sich einzelne Dateien oder Order anwählen lassen.
<div style="clear: both"></div>

==Dezimal (Decimal)==
[[File:mm_attribut_dezimal.png|thumb|365px]]
Das Attribut '''Dezimal''' erzeugt ein einzeiliges Eingabefeld und nimmt eine Feldprüfung vor
<div style="clear: both"></div>

==GeoProtection==
[[File:mm_attribut_geoprotection.png|thumb|365px]]
Das Attribut '''GeoProtection''' erzeugt ein HTML-Select. Als Optionen stehen die angewählten Länder zur Verfügung.<br />
Es bietet die Möglichkeit Datensätze so zu konfigurieren, das sie für ausgewählte Länder sichtbar sind oder versteckt werden.

'''Bitte beachten'''<br>
Dieses Attribut benötigt die Extension [https://contao.org/de/extension-list/view/geoprotection.de.html geoprotection], ansonsten wird eine [https://community.contao.org/de/showthread.php?38172-Erste-Gehversuche&p=248078&viewfull=1#post248078 Fehlermeldung] rausgeworfen.
Und wird nicht mit den Nightly Builds geladen, kann aber bei [https://github.com/MetaModels/attribute_geoprotection GitHub] separat runtergeladen werden
<div style="clear: both"></div>

==Kombinierte Einträge (Combined Values)==
[[File:mm_attribut_combinedvalues.png|thumb|365px]]

Das Attribut '''Kombinierte Einträge''' erzeugt ein...

<div style="clear: both"></div>

==Kontrollkästchen (Checkbox)==
[[File:mm_attribut_checkbox.png|thumb|365px]]
Das Attribut '''Kontrollkästchen''' erzeugt eine einfache HTML-Checkbox.

'''Erweiterte Einstellungen'''
*'''Eindeutige Werte'''
*'''Veröffentlichen''': Erzeugt im Backend (in der Listenansicht mit Icon 'Auge') die Option, einen Datensatz für das Frontend freizugeben. Hierzu muss aber auch ein Filter definiert werden. Die genaue Vorgehensweise ist [[MetaModels_Beispiel_3#Published_Filter_im_Frontend_einbauen|hier]] beschrieben.
<div style="clear: both"></div>

==Land (Country)==
[[File:mm_attribut_land.png|thumb|365px]]
Das Attribut '''Land''' erzeugt ein HTML-Select, welches alle Länder enthält.
<div style="clear: both"></div>
[[File:mm_attribut_land_filter.png|thumb|365px]]
'''Verfügbare Länder filtern'''<br>
Wenn dieses Feld leer ist, werden automatisch alle Länder im Select angezeigt. Die Auflistung lässt sich verkürzen, indem man nur die gewünschten Länder hier auflistet.
<div style="clear: both"></div>

==Langtext (Longtext)==
[[File:mm_attribut_longtext.png|thumb|365px]]
Das Attribut '''Langtext''' erzeugt eine Textarea.

<span style="color:red">Es stehen 3 Richtext-Editoren zur Verfügung: tinyFlash, tinyMCE und tinyNews.</span><br>
Eigens angepasste RTEs können hier ausgewählt werden, sofern sie auch angelegt wurden, bspw. in einer ''tinyCustom.php''.
<div style="clear: both"></div>

[[File:mm_paletteneinstellungen_longtext.png|thumb|365px]]
Die <span style="color:red">Richtext-Editoren</span> können über die [[MetaModels_Backend:_Eingabemaske#Longtext|Eingabemaske]] (fka Paletteneinstellungen) aktiviert werden.
* Paletteneinstellungen
* Paletteneinstellungen bearbeiten (also auf das Palettenicon ganz rechts klicken)
* Formular auswählen
* Bleistiftsymbol beim Attribut "Longtext" anklicken
* unter '''presentation_legend''' gibt es einen Punkt '''Enable richtext editor on this'''
* hier kann der Richtext-Editor ausgewählt werden
<div style="clear: both"></div>

==Mehrfachauswahl (Tags)==
[[File:mm_attribut_tags.png|thumb|365px]]
Das Attribut '''Mehrfachauswahl (Tags)''' erzeugt Checkboxen mit Mehrfachauswahl.

'''Anzeigeeinstellungen'''
* '''Datenbanktabelle''': Hier erscheinen alle in der Contao-Installation verfügbaren Tabellen (siehe Hinweis weiter unten)
* '''Tabellenspalte''': Namen der Spalte auswählen, die die Werte der Tags zur Verfügung stellt
* '''ID der Mehrfachauswahl''': Vorzugsweise '''id''' auswählen. Standardmässig führt jede Contao-Tabelle eine ID mit
* '''Alias der Mehrfachauswahl''': Vorzugsweise das '''alias''' auswählen
* '''Sortierung der Mehrfachauswahl''': Namen der Spalte auswählen, die die Werte der Tags zur Verfügung stellt
*'''SQL''': Die Auswahlmöglichkeiten können per SQL eingeschränkt werden

Hinweis: Um das Attribut '''Tags''' anlegen zu können, muss man zuerst eine neue Tabelle (sprich ein neues MetaModel) erstellen, in der die verschiedenen Tags angelegt werden. Die genaue Vorgehensweise ist - am Beispiel des Attributes '''Auswahl''' - [[MetaModels_Beispiel_4|hier]] beschrieben. Erst dann kann man unter '''Datenbanktabelle''' die betreffende Tabelle auswählen.
<div style="clear: both"></div>

==Numerisch (Numeric)==
[[File:mm_attribut_numerisch.png|thumb|365px]]
Das Attribut '''Numerisch''' erzeugt ein einzeiliges Eingabefeld und nimmt eine Feldprüfung vor

<div style="clear: both"></div>

==Sprachschlüssel (Langcode)==
[[File:mm_attribut_sprachcode.png|thumb|365px]]
Das Attribut '''Sparchcode''' erzeugt ein HTML-Select. Als Optionen stehen die angewählten Sprachen (langcodes) zur Verfügung.
<div style="clear: both"></div>

==Text==
[[File:mm_attribut_text.png|thumb|365px]]
Das Attribut '''Text''' erzeugt ein einzeiliges Eingabefeld.
<div style="clear: both"></div>

==Timestamp (Datum)==
[[File:mm_attribut_timestamp.png|thumb|365px]]
Das Attribut '''Timestamp''' erzeugt ein einzeiliges Eingabefeld mit Datumsprüfung.

'''Datum und Zeit > Schema'''
*'''Datum''' erzeugt z.B. 2013-03-06
*'''Datum und Zeit''' erzeugt z.B. 2013-03-06 08:15
Das Datum wird so konfiguriert, wie es in den Backend-Einstellungen von Contao definiert ist. Im Frontend richtet es sich nach den allgemeinen Einstellungen oder je nach Konfiguration nach den Einstellungen in der Seitenstruktur.

<div style="clear: both"></div>

==URL==
[[File:mm_attribut_url.png|thumb|365px]]
Das Attribut '''URL''' erzeugt zwei einzeilige Eingabefelder. Eines für den Linktext und eines für die URL.
Mit dabei ist auch noch ein Icon, über das sich eine Seite aus der Seitenstruktur auswählen lässt.

'''Bitte beachten'''<br>
Externe Links müssen mit einem http:// (oder https://) versehen sein, anderfalls interpretiert MetaModels die URL als relativen Link.

<div style="clear: both"></div>

==Übersetztes Alias==
[[File:mm_attribut_translated_alias.png|thumb|365px]]
Das Attribut '''translatedalias''' erzeugt ein einzeiliges Eingabefeld.
<div style="clear: both"></div>

==Übersetzte Datei==
[[File:mm_attribut_translated_datei.png|thumb|365px]]
Das Attribut '''Übersetzte Datei''' erzeugt ein einzeiliges Eingabefeld.
<div style="clear: both"></div>

==Übersetzter Longtext==
[[File:mm_attribut_translated_longtext.png|thumb|365px]]
Das Attribut '''Übersetzter Longtext''' erzeugt eine mehrzeilige Textarea.
<div style="clear: both"></div>

==Übersetzte Auswahl==
[[File:mm_attribut_translated_auswahl.png|thumb|365px]]
Das Attribut '''Übersetzte Auswahl''' erzeugt ein HTML Select.

Ein Beispiel zur Verwendung ist hier zu finden:
[[MetaModels_Beispiel:_Übersetzter_select|Weiteres Beispiel: Übersetzter select]] - Mehrsprachiges Select-Attribut einrichten
<div style="clear: both"></div>

==Übersetzte Tags==
[[File:mm_attribut_translated_tags.png|thumb|365px]]
Das Attribut '''Übersetzte Tags''' erzeugt ein....
<div style="clear: both"></div>

==Übersetzter Text==
[[File:mm_attribut_translated_text.png|thumb|365px]]
Das Attribut '''Übersetzter Text''' erzeugt ein einzeiliges Eingabefeld.
<div style="clear: both"></div>

MetaModels Backend: Eingabemaske

2013-09-04T14:39:50Z

Datenkind: /* Longtext */ Hinweis auf tinyCustom

[[Category:MetaModels|M3]]
=Allgemeines zur Eingabemaske (fka Paletteneinstellungen)=
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
# [[MetaModels_Backend:_Eingabemaske| MetaModels Eingabemaske]]
# [[MetaModels_Backend:_Filter| MetaModels Filter]]
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]

==Was ist eigentlich eine Eingabemaske ?==
[[File:icons_paletteneinstellungen.png|left|32px]]
Mit der Eingabemaske wird im Wesentlichen das Aussehen der Datenerfassung im Backend gesteuert. Es beantwortet die folgenden Fragen:
* Wo werden die Daten erfasst?
* Wie sieht die Übersichtsliste aus?
* Wie kann ich die Übersichtliste organisieren?
* Wie sieht das Erfassungsformular aus?
* Wie kann ich das Aussehen des Erfassungsformulars beeinflussen?

=Einstieg=
[[File:mm_backend_paletteneinstellungen.png|thumb|400px]]
Nachdem man über '''Neue Eingabemaske''' einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:
# Eingabemaske bearbeiten: Erstellen und organisieren der BE Liste
# Einstellungen der Eingabemaske bearbeiten: Erstellen und organisieren des BE Formulars
<div style="clear: both"></div>

=Backend Liste=
==Eingabemaske==
[[File:mm_backend_paletteneinstellungen_palette.png|thumb|400px]]
Nachdem man über '''Neue Eingabemaske''' einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:
* '''Name''': Name der Palette
* '''Panel-Layout''': Damit lässt sich die BE Liste organisieren. 4 Werte stehen zur Verfügung: filter, sort, search und limit. Mit Komma oder Semikolon steuert man die Darstellung (siehe nächster Screen)
* '''Integration''': Unabhängig, Als Kind-Tabelle
* '''Sortiermodus''':
** 0 Datensätze werden nicht sortiert
** 1 Datensätze nach festem Feld sortieren,
** 2 Datensätze nach variablen Feld sortieren,
** 5 Einträge werden als Baumstruktur dargestellt (siehe Seitenstruktur)
* '''Sortier-Flag''': diverse Optionen
* '''Backend-Bereich''': Hier kann man auswählen, wo in der Backend-Navigation (links) der Eintrag 'Musicbox' erscheinen soll. Neu lässt sich das eigene MetaModel auch in eine Bereich namens "MetaModel Boilerplate" packen
* '''Backend-Icon''': Optional kann man sein eigenes Icon anzeigen lassen
* '''Backend-Beschreibung''': Sprache, Labeltext (Name deiner BE Liste), Beschreibungstext (Tooltip)
<div style="clear: both"></div>

==Panel-Layout==
[[File:mm_backend_paletteneinstellungen_panel.png|thumb|400px]]
Die Einträge unter dem Panel-Layout bestimmen, ob und wie die einzelnen Funktionen erscheinen.
<div style="clear: both"></div>

==Backend Liste gestalten==
[[File:mm_backend_liste_rendereinstellungen.png|thumb|400px]]
Es besteht die Möglichkeit, die BE-Liste etwas user-freundlicher zu gestalten, indem man eine spezifische CSS-Datei einbettet. Mit wenigen CSS-Anweisungen kriegt man recht schnell eine anständige Ansicht hin. Hier folgend ein Beispiel.

'''CSS-Datei laden'''<br />
Die CSS-Datei kann irgendwo im Verzeichnis '''tl_files''' (Contao 2) bzw. '''files''' (Contao 3) abgelegt werden. Über '''Zusätzliche CSS-Dateien''' kann die Datei geladen und anschliessend die Option '''Veröffentlichen''' angewählt werden. Nützlich ist in diesem Fall auch die Option '''Labels verbergen'''.

Über die HTML-Source Ansicht der BE-Liste kann man sich die verwendeten CSS-Klassen anzeigen lassen und in der CSS-Datei entsprechend formatieren. Ein Beispiel folgt unten.

Das Ganze funktioniert selbstredend auch für FE-Ansichten.
<div style="clear: both"></div>

'''Das Beispiel musicbox.css'''
[[File:mm_backend_liste.png|thumb|400px]]
<source lang="css">
.item {
overflow: hidden;
padding: 10px 0;
}
.item .field {
margin-bottom: 2px;
}
.item .cover {
float: left;
margin-right: 20px;
}
.item .title .value {
font-size: 13px;
font-weight: bold;
}
.item .composer .value {
color: #c00;
}
</source>
<div style="clear: both"></div>

=Backend Formular=
==Attribute==
[[File:mm_backend_paletteneinstellungen_liste.png|thumb|400px]]
Nachdem man über '''Alle hinzufügen''' alle Attribute hinzugefügt hast, kann man die Liste per Drag&Drop organisieren. Die Reihenfolge legt fest, in welcher Reihenfolge die Eingabefelder im Erfassungsformular erscheinen.
<div style="clear: both"></div>

==Attribut bearbeiten==
[[File:mm_backend_paletteneinstellungen_attribut.png|thumb|400px]]
Jedes Attribut hat gemäss seinem Typ spezifische Einstelloptionen. Was sie jedoch alle gemein haben, sind die so genannten '''Backend-Classes'''. Darüber lassen sich die Eingabefelder ein wenig gestalten. Folgende CSS-Klassen stehen zur Verfügung:
* '''w50''': Die Breite auf 50% festlegen und nach links floaten.
* '''clr''': Alle Floats clearen.
* '''long''': Vergrößert das Eingabefeld, sodass es zwei Spalten umfasst.
* '''wizard''': Das Eingabefeld kürzen, sodass Platz für einen Wizard ist (z.B. einen Date-Picker).
* '''m12''': Dem Element einen oberen Abstand (top-margin) von 12 Pixel geben (für einzelne Checkboxen).
<div style="clear: both"></div>

==Das Backend-Formular==
[[File:mm_backend_paletteneinstellungen_formular.png|thumb|400px]]
Und so könnte das Backend-Formular in etwa aussehen. Rot gekennzeichnet die Backend-Klassen, die den Attributen mitgegeben wurden.
<div style="clear: both"></div>

==Das Backend-Formular mit Legenden==
[[File:mm_backend_eingabemaske_legenden.png|thumb|400px]]
Das Backend-Formular lässt sich noch weiter organisieren, indem man Eingabefelder, etc. über '''Legenden''' gruppiert (siehe nebenstehendes Beispiel).
<div style="clear: both"></div>

[[File:mm_backend_eingabemaske_legende_erfassen1.png|thumb|400px]]
Hierzu auf der Attributsübersicht auf '''Neu''' klicken.
<div style="clear: both"></div>

[[File:mm_backend_eingabemaske_legende_erfassen2.png|thumb|400px]]
Als Typ kann man nun den Typ '''Legende''' wählen und gibt anschliessend einen '''Legenden-Titel''' ein.
<div style="clear: both"></div>

[[File:mm_backend_eingabemaske_legende_erfassen3.png|thumb|400px]]
Die '''Legenden-Titel''' können nun per Drag&Drop an die gewünschte Position verschoben werden. Sie können auch jederzeit umbenannt werden.
<div style="clear: both"></div>

=Einstellungen der Eingabefelder (Attribute)=

==Alias==
[[File:mm_paletteneinstellungen_alias.png|thumb|400px]]
<div style="clear: both"></div>

==Auswahl (Select)==
[[File:mm_paletteneinstellungen_select.png|thumb|400px]]
<div style="clear: both"></div>

==Checkbox==
[[File:mm_paletteneinstellungen_checkbox.png|thumb|400px]]
<div style="clear: both"></div>

==Color==
[[File:mm_eingabemaske_color.png|thumb|400px]]
<div style="clear: both"></div>

==Datei==
[[File:mm_paletteneinstellungen_file.png|thumb|400px]]
<div style="clear: both"></div>

==Dezimal==
[[File:mm_paletteneinstellungen_decimal.png|thumb|400px]]
<div style="clear: both"></div>

==GeoProtection==
[[File:mm_paletteneinstellungen_geoprotection.png|thumb|400px]]
<div style="clear: both"></div>

==Longtext==
[[File:mm_paletteneinstellungen_longtext.png|thumb|400px]]
Standardmäßig stehen drei Richtext-Editoren zur Verfügung: tinyFlash, tinyMCE und tinyNews.<br>
Eigens angepasste RTEs können hier ausgewählt werden, sofern sie auch angelegt wurden, bspw. in einer ''tinyCustom.php''
<div style="clear: both"></div>

==Numerisch==
[[File:mm_paletteneinstellungen_numeric.png|thumb|400px]]
<div style="clear: both"></div>

==Sprachcode==
[[File:mm_paletteneinstellungen_sprachcode.png|thumb|400px]]
<div style="clear: both"></div>

==Tags==
[[File:mm_paletteneinstellungen_tags.png|thumb|400px]]
<div style="clear: both"></div>

==Text==
[[File:mm_paletteneinstellungen_text.png|thumb|400px]]
<div style="clear: both"></div>

==Timestamp (Datum/Zeit)==
[[File:mm_paletteneinstellungen_timestamp.png|thumb|400px]]
<div style="clear: both"></div>

==URL==
[[File:mm_paletteneinstellungen_url.png|thumb|400px]]
<div style="clear: both"></div>

==Übersetztes Alias==
Details folgen

==Übersetzte Datei==
Details folgen

==Übersetzter Longtext==
Details folgen

==Übersetzte Auswahl==
Details folgen

==Übersetzte Tags==
Details folgen

==Übersetzter Text==
Details folgen

TinyMCE

2013-01-04T07:52:24Z

Datenkind: Deppenapostrophe entfernt

{{AppliesTo
|Version=2.9.1
}}
[[Category:Admin HOWTOS]]
{{stub}}
=TinyMCE in Contao=
==Unterschiede TYPOlight vs Contao==
Während in TYPOlight
#automatisch die basic.css für TinyMCE eingebunden wird
#in der basic.css definierte Klassen im Editor übers Format-DropDownMenü ausgewählt werden können
#Regeln aus der basic.css auch im Editor-Fenster greifen

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 übers Format-DropDownMenü ausgewählt werden
#Regeln aus der tl_files/tinymce.css greifen auch im Editor-Fenster
#tl_files/tinymce.css wird default im Frontend eingebunden
{{Hinweis|Im Layout kann eingestellt werden, dass tl_files/tinymce.css nicht ins Frontend eingebunden werden soll.}}

==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 eingebunden.
*Die hier definierten Regeln können im Frontend durch Regeln aus den Stylesheets der Themes überschrieben werden.
*In den Layouteinstellungen kann die Einbindung dieses Stylesheets verhindert werden (die Datei wird im Frontend ignoriert).
*Die definierten Regeln greifen im Editor-Fenster, angesprochene Elemente werden hier also entsprechend formatiert dargestellt.
*Die definierten Klassen werden im Texteditor übers Format-DropDownMenü zur Auswahl angeboten.

'''system/themes/tinymce.css''' - Formatierung im Texteditor
*Diese Datei wird per default über tinyMCE.php in den Texteditor eingebunden.
*Ihre Regeln gelten also ebenfalls für die Darstellung im Texteditor.

'''system/config/tinyMCE.php''' - Einstellungen des TinyMCE
*Änderungen sind nicht updatesicher, da diese Datei bei einem Update überschrieben wird.

Für eine '''updatesichere''' Modifizierung der Einstellungen verfährt man wie folgt:
#tinyMCE.php duplizieren und umbenennen in zum Beispiel '''tinyMCE_custom.php'''
#Die eigene Datei tinyMCE_custom.php über system/config/dcaconfig.php in Contao einbinden
#Eintrag in der system/config/dcaconfig.php
<source lang="php">
// Die eigene RTE-Konfiguration verwenden für Text-Elemente
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';
</source>
Näheres dazu weiter unten auf dieser Seite [[TinyMCE#Updatesicheres_Anpassen_der_system.2Fconfig.2FtinyMCE.php|Updatesicheres Anpassen der system/config/tinyMCE.php]]

*Cache leeren und evtl. Abmelden und wieder Anmelden bzw. sogar Browser-Neustart, oder '''Shift + Mausklick auf 'Seite neu laden''''
[http://www.contao-community.de/showthread.php?10392-TinyMCE-einzelne-Felder-ausblenden Siehe auch MacKP im Forum zu diesem Thema]

=Mit dem TinyMCE arbeiten=
==Bereitstellung von CSS-Klassen im Editor==
Um im TinyMCE Elemente mit vorbereiteten Klassen auszuzeichnen, 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 übers Format-DropDownMenü ausgewählt werden.

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

{{Hinweis|ID-Selektoren wie z.B. '''#meineID, #raute ...''' werden '''nicht''' im Format-DropDownMenü angezeigt. Nur Klassen-Selektoren wie z.B. '''.meineKlasse, .warning ...'''.}}

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

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

Jede dieser Regeln kann mit einer Regel aus einem anderen Stylesheet der jeweiligen Seite wieder überschrieben werden ('''C'''as'''C'''ading-'''S'''tylesheet = CSS).
[[Datei:Tinyklassen-frontend.png|center|frame|Frontendansicht]]

Weiterhin kann die tl_files/tinymce.css in jedem Seitenlayout auch ignoriert (nicht eingebunden) werden.
[[Datei:Tinymce-css-ignorieren.png|center|frame|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 (Format-DropDownMenü) und werden auch entsprechend formatiert dargestellt, aber die tl_files/tinymce.css wird dann nicht mehr im Frontend eingebunden.}}

==Spezieller Selektor nur für den Editor-Inhalt==
Der Editor-Inhalt ist eine eigene HTML-Seite und wird in einem IFRAME dargestellt. Das BODY-Element dieser Seite besitzt die ID ''''tinymce'''' sowie die Klasse ''''mceContentBody''''. Mit den Selektoren '''#tinymce''' sowie '''.mceContentBody''' kann somit der Inhalt des Editors individuell gestaltet werden. Das wird z.B. dafür benötigt, um den Hintergrund zu formatieren, wenn man die Ansicht im Editor der Ansicht im Frontend angleichen möchte. Die Inhalte im Frontend befinden sich ja innerhalb des HTML-Frameworks, welches im Editor-Inhalt so nicht vorhanden ist.

Quelle: [http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css#TinyMCE_specific_rules TinyMCE:Configuration/content css#TinyMCE specific rules - Moxiecode Documentation Wiki]

=TinyMCE anpassen=

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

{{Hinweis|Direkte Ä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:

<source lang="php">
// Die eigene RTE-Konfiguration verwenden für Text-Elemente
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';
</source>

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

Obiger Eintrag gilt nur für den Editor im Inhaltselement vom Typ Text. Sollen die Veränderungen auch in anderen Modulen wirksam werden, müssen folgende Anweisungen hinzugefügt werdeen:

<source lang="php">
// Die eigene RTE-Konfiguration verwenden für
//Artikel-Teaser
$GLOBALS['TL_DCA']['tl_article']['fields']['teaser']['eval']['rte'] = 'tinyCustom';
// Events-Details
$GLOBALS['TL_DCA']['tl_calendar_events']['fields']['details']['eval']['rte'] = 'tinyCustom';
// Kommentare
$GLOBALS['TL_DCA']['tl_comments']['fields']['comment']['eval']['rte'] = 'tinyCustom';
// Text-Elemente
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';
// FAQs
$GLOBALS['TL_DCA']['tl_faq']['fields']['answer']['eval']['rte'] = 'tinyCustom';
// Formulare
$GLOBALS['TL_DCA']['tl_form_field']['fields']['text']['eval']['rte'] = 'tinyCustom';
// News
$GLOBALS['TL_DCA']['tl_news']['fields']['text']['eval']['rte'] = 'tinyCustom';
</source>

Meistens wird ein abgespeckter, modifizierter TinyMCE-Editor nur für Redakteure (Nicht-Admins) angeboten. Dazu muss man obigen Code noch ein wenig erweitern:
<source lang="php">
// Nur für Non-Admins.
$this->import('BackendUser', 'User');

if(!$this->User->isAdmin)
{
// Die eigene RTE-Konfiguration verwenden für
//Artikel-Teaser
$GLOBALS['TL_DCA']['tl_article']['fields']['teaser']['eval']['rte'] = 'tinyCustom';
// Events-Details
$GLOBALS['TL_DCA']['tl_calendar_events']['fields']['details']['eval']['rte'] = 'tinyCustom';
// Kommentare
$GLOBALS['TL_DCA']['tl_comments']['fields']['comment']['eval']['rte'] = 'tinyCustom';
// Text-Elemente
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';
// FAQs
$GLOBALS['TL_DCA']['tl_faq']['fields']['answer']['eval']['rte'] = 'tinyCustom';
// Formulare
$GLOBALS['TL_DCA']['tl_form_field']['fields']['text']['eval']['rte'] = 'tinyCustom';
// News
$GLOBALS['TL_DCA']['tl_news']['fields']['text']['eval']['rte'] = 'tinyCustom';
}
</source>

==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 Regeln 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, verfährt man wie folgt.

Einbinden der basic.css in den Texteditor über die Konfigurations-Datei tinyCustom.php:

<source lang="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",
</source>

Nun greifen die Regeln aus der basic.css auch im Texteditor (und im Frontend, sofern die basic.css ins Frontend eingebunden ist).

{{Hinweis|Hierbei ist zu bedenken, dass 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 kopiert die Regeln aus der basic.css in das Stylesheet tl_files/tinymce.css.
Sofern dieses Stylesheet vom Layout nicht ignoriert wird, wird es ja sowohl 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?

==TinyMCE PopUps anpassen (Tabs "löschen")==
Wenn man bestimmte Felder (oder sonstiges) bei den PopUps (Beispiel: Tabelleneigenschaften) ausblenden möchte, muss man in der TinyMCE-Konfigurationsdatei folgenden Eintrag einbauen:
{{Hinweis|Der Pfad ist frei wählbar. Wichtig ist, dass man ihn, respektive die Datei, "von außen" erreichen kann. Daher eignet sich "tl_files" am ehesten. Der Dateiname ist auch frei wählbar.}}
<source lang="php">
tinyMCE.init({
...
popup_css_add : "<?php echo TL_PATH; ?>/tl_files/tinyMCE/tinyMCE_popup.css",
...
});
</source>

Nun kann man in der betreffenden CSS-Datei die Einstellungen vornehmen. Ausblenden via "display: none;". Auch Hintergrundfarben, Schriftarten (etc) kann man bestimmen. Einfach alles, was CSS unterstützt. Die CSS-Klassen/IDs kann man ganz einfach via Firebug oder sonstigen Entwickler-Plugins in den Browsern auslesen.

Um das Tab "Erweitert" bei den Tabelleneigenschaften auszublenden, ist z. B. folgender Eintrag zuständig:

<source lang="css">
#advanced_tab { display: none; }
</source>

==TinyMCE konfigurieren==
Die tinyMCE.php (bzw. wie im Beispiel die tinyCustom.php) bietet ebenfalls interessante Möglichkeiten um das Erscheinungsbild des Editors anzupassen.
Hier können z.B. Buttons deaktiviert werden, um nicht benötigte Funktionen zu entfernen.<br />
Voraussetzung ist eine zuvor erstellte tinyCustom.php, wie im Abschnitt [[#Updatesicheres_Anpassen_der_system/config/tinyMCE.php|Updatesicheres Anpassen der system/config/tinyMCE.php]] beschrieben.

'''Contao Standard TinyMCE'''

[[Datei:Tinymce-standard.png|center|frame|Standardausgabe von tinyMCE.php]]

'''Quellcodeauszug aus der tinyMCE.php'''
<source lang="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"
</source>

'''Über /system/config/tinyCustom.php angepasster TinyMCE'''

[[Datei:Tinymce-angepasst.png|center|frame|Angepasste tinyCustom.php]]

'''Quellcodeauszug aus der tinyCustom.php'''
<source lang="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 : ""
</source>

Alle Konfigurationsmöglichkeiten findet man auf der Entwickler-Seite:
[http://wiki.moxiecode.com/index.php/TinyMCE:Configuration TinyMCE:Configuration - Moxiecode Documentation Wiki]

Über das [http://www.delusionworld.com/files/tinymce_rte-config-utility/ TinyMCE RTE Button configuration utility] kann man sich sehr schnell und einfach eine neue Menükonfiguration zusammenstellen.

==TinyMCE Anführungszeichen automatisch ersetzen==
Wenn man Texte vorwiegend in Word verfasst, oder diese zur Verfügung gestellt bekommt, kopiert man meist den Text in Inhaltselemente. Dabei werden die Word-eigenen Formatierung und Zeichen übernommen. Das sind die folgenden Zeichen: „ / “ / ” / ‚ / ‘ / ’

Beim Erstellen eines Textes im TinyMCE werden aber nur die folgenden Zeichen verwendet: ' / "

Will man Word-eigenen Anführungszeichen nun nicht haben ändert man in der Konfigurationsdatei die Zeile mit
<source lang="php">
...
entities : "160,nbsp,60,lt,62,gt,173,shy",
...
</source>
in
<source lang="php">
...
entities : "160,nbsp,60,lt,62,gt,173,shy,8216,quot,8217,quot,8218,quot,8220,quot,8221,quot,8222,quot",
...
</source>
Nun werden die speziellen Anführungszeichen automatisch beim Einfügen eines kopierten Textes durch " ersetzt.
{{Hinweis|Nach 'shy' geht es los mit den zusätzlichen Zeichen. Die ersten 3 Ersetzungen sind für einfache Anführungszeichen, die letzten 3 für die doppelten (ggf. entsprechendes entfernen, wenn man was nicht will).}}

==Quellenangaben==
[http://blog.netprofit.de/contao-anpassen-3-wenig-bekannte-tipps.html blog.netprofit.de]<br />
[http://dev.contao.org/projects/typolight/wiki/TutorialsCssImEditorVerwenden Vorhandene Stylesheets in TinyMCE nutzbar machen]<br />
[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]