TinyMCE 4: Klassen/Styles einbinden

Fragen zur Installation von CONTENIDO 4.9? Probleme bei der Konfiguration? Hinweise oder Fragen zur Entwicklung des Systemes oder zur Sicherheit?
McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: TinyMCE 4: Klassen/Styles einbinden

Beitrag von McHubi » Di 22. Nov 2016, 13:46

Hallo Horst,

bitte unterlasse in Zukunft Doppelpostings wie dieses, wenn Du woanders bereits danach gefragt hast:
TinyMCE4 anpassen

Beitragvon Horst1234 » Mo 21. Nov 2016, 12:31
Hallo zusammen,
hat schon jemand Erfahrung in der Anpassung des TinyMCE4?
Insbesondere würde ich gerne 2 Dinge wissen:
1. Wie kann ich den Editor so einstellen, dass er mir keinen Code raushaut (versuche einem Link eine class zuzuordnen, schmeißt der tiny immer raus). tinymce extended_valid_elements *[*] und
tinymce valid_elements *[*] sind gesetzt - gelten die überhaupt noch für TinyMCE4? Gibts andere Mandanteneinstellungen für den TinyMCE4?
2. Im TinyMCE3 gabs den class-selector im Link- und Image-Plugin, kann man das reaktivieren?
Und wenn ja, wo?
Gruß,
Horst
http://forum.contenido.org/viewtopic.php?f=99&t=36961

Das ist nicht zielführend, da andere - und auch Du selbst - Infos zum gleichen Problem an mehreren Stellen suchen musst. :wink:

Danke Dir.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Horst1234
Beiträge: 366
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Re: TinyMCE 4: Klassen/Styles einbinden

Beitrag von Horst1234 » Di 22. Nov 2016, 17:27

sorry, o.k.
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: TinyMCE 4: Klassen/Styles einbinden

Beitrag von McHubi » Mi 13. Mär 2019, 00:42

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. :D
Zuletzt geändert von McHubi am Di 26. Mär 2019, 14:15, insgesamt 4-mal geändert.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

lunsen_de
Beiträge: 297
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: TinyMCE 4: Klassen/Styles einbinden

Beitrag von lunsen_de » Do 14. Mär 2019, 15:54

Hallo, danke für die Info.

In deinem ersten Codeabschnitt ist eine schließende Klammer am Ende zuviel.

Dann hätte ich noch die Frage: wo muss ich was eintragen, um eine eigene (angelegte) Textklasse zuzuweisen, also z.B.

.textschoen {font-size:13px; padding 13ps; ..........} in der style_tiny.css.

Früher (tiny3) tauchten die in der style_tiny angelegten eigenen Klassen immer in dem Formate dropdown auf. Wo kann man da im TinyMCE4 darauf zugreifen.

Grüße larslunsen

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: TinyMCE 4: Klassen/Styles einbinden

Beitrag von McHubi » Do 14. Mär 2019, 18:16

Hallo lunsen_de
In deinem ersten Codeabschnitt ist eine schließende Klammer am Ende zuviel.
Immer diese Details... :mrgreen:
Dann hätte ich noch die Frage: wo muss ich was eintragen, um eine eigene (angelegte) Textklasse zuzuweisen
Hab ich oben ergänzt.

:D
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

lunsen_de
Beiträge: 297
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: TinyMCE 4: Klassen/Styles einbinden

Beitrag von lunsen_de » Do 21. Mär 2019, 18:45

Hallo,

kämpfe immernoch mit den Details/eigenen Styles des Tiny4.

Habe jetzt versucht ein Stück Text zu verlinken und eine Class zuzuweisen. Habe die zusätzlichen Parameter von oben eingetragen, aber "link_class_list" funktioniert bei mir nicht. Ich kann Class beim verlinken auswählen (z.B. link_standard) und ok drücken, dann speichern, aber im Quelltext ist nichts zu finden von <a class="link_standard".... schon nach dem ok drücken nicht. Wird iregndwie nicht in den Quelltext übergeben.

Zum Vergleich lege ich eine Tabelle an und weise der Zelle eine Klasse zu (tabellenzelle_standard), finde ich die im Quelltext (td_standard).

Mache ich da was falsch?

Gruß larslunsen

lunsen_de
Beiträge: 297
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: TinyMCE 4: Klassen/Styles einbinden

Beitrag von lunsen_de » Do 21. Mär 2019, 19:28

Hallo, hat sich erledigt.

Nach Eintrag von:

Code: Alles auswählen

{
"valid_elements": "*[*]",
"extended_valid_elements":  "*[*]"
}
geht auch das.

Grüße larslunsen

Antworten