In den RTE kann über die SeitenTSconfig eine CSS Datei geladen werden, die dann die Ansicht im Backend an das Fontend anpasst.
RTE.default.contentCSS = fileadmin/rte.css
Ich mache es immer so, dass ich eine rte.css einbinde und über diese Datei dann per css include die für das fontend zuständige Designdatei für den Inhalt lade.
Das hat den Vorteil, dass ich das Design nicht an zwei Stellen verändern muss und in der rte spezifischen Datei noch Besonderheiten eingestellt werden können.
So gebe ich in der rte.css z.B. die Eigenschaften von Links mit dem Zusatz !important an, damit der rte Standard korrekt überschrieben wird, ansonsten zeigen einige Browser die Links in Standard RTE-Farbe:
body.htmlarea-content-body a { color: #ff0000 !important; text-decoration:none !important; }
body.htmlarea-content-body a:visited { color: #ff0000 !important; }
body.htmlarea-content-body a:focus { text-decoration:underline !important; background-color: #fff !important; outline: 0.1667em #ff0000 solid !important; }
body.htmlarea-content-body a:focus,
body.htmlarea-content-body a:hover,
body.htmlarea-content-body a:active { color:#ff0000 !important; text-decoration:underline !important; }
Weiterhin gebe ich zumeinst auch noch css Selectoren mit verschiedenen css Klassen an, in dennen nichts am Design geändert wird, lediglich, damit der rte weiß, welche Klassen für welchen html code erlaubt sind:
span.highlight, span.small-caps, span.dimmed, span.small, span.xsmall, span.tall, span.xtall,
span.gl, span.gu, span.g, span.b, span.r { }
Der css code oben macht z.B. für makierten Text im RTE die angegebenen Klassen, die ihr Design über die css Datei für das Frontent schon bekommen haben, verfügbar, ob das in der Weise nötig ist hängt natürlich auch von der weiteren Konfiguration des RTE ab, es hat sich bei mir allerdings bewehrt, dem RTE explizit zuzuweisen, welche Klassen wo erlaubt sind.