Eigene Styles im TYPO3 RTE verwenden

12.07.2010 | Kategorie: TYPO3 | Autor: Lars Messmer 

Der RTE (Rich Text Editor) von TYPO3 lässt sich enorm flexibel anpassen. In diesem Beitrag zeigen wir, wie einfach eigene Styles über CSS-Klassen definiert und im Editor verwendet werden können.

TSConfig
Diese Konfiguration wird normalerweise in den Seiteneigenschaften der Rootseite unter Optionen vorgenommen.

RTE.default {
       # Zuweisung der CSS-Datei
       contentCSS = fileadmin/css/typo3-RTE.css

       # Die Buttons "Blockstyle" und "Blockstylelabel" müssen angezeigt werden
       showButtons = blockstyle, blockstylelabel

       # Das "class" Attribut muss beim "p" tag erlaubt werden
       entryHTMLparser_db = 1
       entryHTMLparser_db {
              tags {
                     p.allowedAttribs = class
              }
       }
}

# Die CSS Klassen beschriften
RTE.classes >
RTE.classes {
       box_blue  {
              name = Blue Box
              # CSS Styling für das Pulldown im RTE
              value = background-color: #C1E3FF; border: 1px solid #005191; color: #005191;
       }
       box_orange {
              name = Orange Box
              # CSS Styling für das Pulldown im RTE
              value = background-color: #FEF3DE; border: 1px solid #F8B323; color: #F8B323;
       }
}

Dies ist nur ein Auszug aus einer kompletten TSConfig Konfiguration,
ein vollständigeres TSConfig als Text-File zum download

Backend CSS Script typo3-RTE.css
Die Definition der verwendeten Klassen in der CSS Datei ist zwingend

.box_orange {
       background-color :#FEF3DE;
       border : 1px #F8B323 solid;
       padding : 5px;
       margin : 0;
}
.box_blue {
       background-color :#C1E3FF;
       border : 1px #005191 solid;
       padding : 5px;
       color: #005191;
}

Frontend CSS Script style.css
Dient nur dem Styling im Frontend

.box_orange {
       background-color :#FEF3DE;
       border : 1px #F8B323 solid;
       padding : 5px;
       margin : 0;
}
.box_blue {
       background-color :#C1E3FF;
       border : 1px #005191 solid;
       padding : 5px name="code";
       color: #005191;
}