Bakehouse Text-Editor
Individuelle Format-Stil-Klassen
Wenn Textinformationen editiert werden, können Redakteur:innen im Editor, über den Select "Formate", ausgewählten Textpassagen CSS-Klassen zuteilen. Diese Stile werden im TypoScript definiert:
Typoscript
# Blendet die Bakehouse-Standard-Klassen aus
plugin.tx_bh.settings.editor.styles >
# Eigene Stil-Klassen
plugin.tx_bh.settings {
editor {
styles {
teaser {
title = Teaser
selector = p
classes = bh-style-teaser
}
inline-code {
title = Code
inline = span
classes = bh-style-inline-code
}
button-green-border {
title = Button mit grünem Rand
selector = a
classes = greenButton
}
greenHeadline {
title = Überschrift in grün
block = h1
classes = green Headline
}
orangeText {
title = Text in Orange
inline = span
styles {
color = #fe8b32
font-size = 15px
padding-left = 20px
}
}
}
}
}
# Format-Stil-Klassen für ein ausgewähltes Content-Element
# (nach oder im TypoScript des Elements einfügen)
plugin.tx_bh.settings.contentElements {
el-meinElement.editor.styles {
fontColorBlue {
title = Farbe Blau
inline = span
classes = fontColorBlue
}
}
}
TypoScript-Attribute
| Attribut | Beschreibung |
| title | Bezeichnung des Format-Stils |
| block | Der Format-Stil wird auf den ganzen umliegenden HTML-Tag angewendet |
| inline | Der Format-Stil wird auf die ausgewählte Textpassage angewendet |
| selector | Der Format-Stil ist nur auf einen bestimmten HTML-Tag anwendbar, etwa a ul li p |
| classes | Die ausgewählte Textpassage wird mit dieser/n CSS-Klasse(n) ausgezeichnet |
| styles | Mit dieser Anweisung wird der Textpassage inline-CSS hinzugefügt. Der im oberen Beispiel definierte Format-Stil "orangeText" würde so aussehen: <span style="font-size: 15px; color: #fe8b32; padding-left: 20px;"> |
Ausgabe im Front-End-Editing
Die Auswahl der Stile im Editor stellt sich dann folgendermaßen dar: