Bakehouse Text-Editor

    Der Bakehouse Text-Editor baut auf die JavaScript-Bibliothek von TinyMCE, welche nach dem What-You-See-Is–What–You–Get-Prinzip (WYSIWYG) funktioniert.

    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

    AttributBeschreibung
    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 CSS-Klasse 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: