Hallo zusammen,
ich weiß, ich wärme hier ein altes Thema auf. Aber da die Antwort auf Zuweisung von CSS-Klassen im Tiny jetzt nicht wirklich beantwortet ist, und CONTENIDO 4.10 den Tinymce4 standardmäßig aktiviert hat, mal ein Beispiel.
"Administration -> System -> wysiwyg"
Abschnitt TinyMCE 4-Konfiguration für CMS_HTML, Zusätzliche Parameter (JSON, das an Tinymce bei der Initalisierung übergeben wird)
Code: Alles auswählen
{"style_formats": [
{"title": "Absatz Fussnote", "selector": "p", "classes": "absatz_fussnote"},
{"title": "Absatz Rahmen", "selector": "p", "classes": "absatz_rahmen"}
],
"image_class_list": [
{"title": "Keine Klasse", "value": ""},
{"title": "bild_breite_max_50p", "value": "bild_breite_max_50p"},
{"title": "bild_breite_max_50p_li_umfl", "value": "bild_breite_max_50p_li_umfl"},
{"title": "bild_breite_max_50p_re_umfl", "value": "bild_breite_max_50p_re_umfl"},
{"title": "bild_breite_max_30p", "value": "bild_breite_max_30p"},
{"title": "bild_breite_max_30p_li_umfl", "value": "bild_breite_max_30p_li_umfl"},
{"title": "bild_breite_max_30p_re_umfl", "value": "bild_breite_max_30p_re_umfl"}
],
"link_class_list": [
{"title": "Keine Klasse", "value": ""},
{"title": "link_standard", "value": "link_standard"}
],
"table_class_list": [
{"title": "Keine Klasse", "value": ""},
{"title": "tabelle_standard", "value": "table_standard"}
],
"table_cell_class_list": [
{"title": "Keine Klasse", "value": ""},
{"title": "tabellenzelle_standard", "value": "td_standard"}
],
"table_row_class_list": [
{"title": "Keine Klasse", "value": ""},
{"title": "tabellenzeile_standard", "value": "tr_standard"}
]
}
"Style -> CSS"
style_tiny.css
Code: Alles auswählen
.link_standard {}
.bild_breite_max_50p,
.bild_breite_max_50p_li_umfl,
.bild_breite_max_50p_re_umfl {
max-width: 50%;
height: auto;
margin-bottom: 0.5em;
}
.bild_breite_max_50p_li_umfl {
float: right;
margin-left: 1em;
}
.bild_breite_max_50p_re_umfl {
float: left;
margin-right: 1em;
}
.bild_breite_max_30p,
.bild_breite_max_30p_li_umfl,
.bild_breite_max_30p_re_umfl {
max-width: 30%;
height: auto;
margin-bottom: 0.5em;
}
.bild_breite_max_30p_li_umfl {
float: right;
margin-left: 1em;
}
.bild_breite_max_30p_re_umfl {
float: left;
margin-right: 1em;
}
.table_standard {}
.td_standard {}
.tr_standard {}
p.absatz_fussnote {
background-color: #999999;
}
p.absatz_rahmen {
border: 1px solid #000000;
}
"Style -> Layouts"
standard.html
Code: Alles auswählen
<link rel="stylesheet" type="text/css" href="css/style_tiny.css" />
Die CSS-Klassen bei den ..._class_list tauchen dann in den jeweiligen Eigenschaften der Elemente auf. Das Zuweisen von weiteren CSS-Klassen geht per Menü-Dropdown "Format -> Formate". Dafür werden die Klassen nicht in ..._class_list angegeben sondern als style_formats.
Man kann den Elementen jetzt mittlerweile auch per Dropdown mehrere CSS-Klassen zuweisen und auch wieder abwählen, was vorher im TinyMCE3 nicht ging. Hier war nur eine möglich, alle weiteren mussten über die HTML-Ansicht manuell hinzugefügt werden.
Die Elemente sind dann sowohl im Frontend als auch im Tiny gestylt wie in den css-Klassen angegeben.