von Dirk Raufer, 05.03.2006

Der neue TYPO3-Editor im Praxiseinsatz: Workshop: htmlArea

Aus dem
t3n Magazin Nr. 3

CSS

p.meinabsatz{ color:#00FF00; border:solid 1px black; }
img.bildmitrand{ border:1px solid silver }
span.gruenertext{ color:green; }
a.blau { color:blue; }
.silber{ color:silver; }

Listing 2

Die neuen Stile müssen jedoch noch zusätzlich freigeschaltet werden. Dazu wird im Seitenheader der Root-Seite unter TSconfig Folgendes eingegeben:

TYPOSCRIPT

# Freischalten der Absätze im Editor
RTE.default.classesParagraph = meinabsatz

# Freischalten der Textformatierungen im Editor
RTE.default.classesCharacter = gruenertext

# Freischalten der Linkformatierungen im Editor
RTE.default.classesAnchor = blau

# Freischalten der Bildformatierungen im Editor
RTE.default.classesImage = bildmitrand

# Freischalten von Taglosen Klassen
RTE.default.showTagFreeClasses = 1

#Freischalten der Klassen im Frontend
RTE.config.tt_content.bodytext.proc.allowedClasses = meinabsatz,gruenertext,blau,bildmitrand

Listing 3

Ein mit der Maus markierter Absatz kann nun mit dem neuen Stil formatiert werden. Dazu wird in der Absatz-Auswahlbox (1) der neu erschienene Stil <meinabsatz> gewählt. Jetzt ist der Text des Absatzes rot gefärbt. Da die CSS-Datei des Editors auch auf der Frontendseite eingebunden ist, wird der so markierte Text auch im Frontend rot angezeigt. Der Stil für Text kann über die Textauswahlliste (2) ausgewählt werden. Um einen Link zu formatieren, wird mit der rechten Maustaste darauf geklickt und im Kontextmenü das Feld „Link ändern“ ausgewählt. Im folgenden Fenster kann unter „Stil“ die gewünschte CSS-Klasse gewählt werden. Nun sind jedoch die Standardstile vom Editor nicht mehr in der Absatz-Auswahlbox (1) verfügbar. Um diese wieder zu aktivieren, muss die TSconfig noch einmal angepasst werden:

Seite:  1 2 3 4 5

Empfohlene Artikel