Formatierungsunterschied: Backend - Frontend

  • Danzig Danzig
    T3PO
    0 x
    24 Beiträge
    0 Hilfreiche Beiträge
    30. 11. 2010, 14:08

    Hallo Community,

    unser Backend wurde auf Typo3 4.4.4 umgestellt. Als Editor wird nun der htmlarea rte eingesetzt. Funktioniert auch soweit ganz gut.

    Nur eins stört mich:
    Gern würde ich im Backendeditor die Formatierungen aus dem Frontend sehen. Zum Beispiel ist ein h2 im Frontend grün unterstrichen, im Backendeditor wird sie aber nur fett und größer dargestellt. Das stört die Redakteure, auch wenn es nach außen gut und richtig aussieht.
    Kann man das irgendwo beeinflussen?

    Vielen Dank für eure Ratschläge!
    Danzig


  • 1
  • NilsBarenbrock NilsBaren...
    Padawan
    0 x
    32 Beiträge
    0 Hilfreiche Beiträge
    30. 11. 2010, 16:26

    In den RTE kann über die SeitenTSconfig eine CSS Datei geladen werden, die dann die Ansicht im Backend an das Fontend anpasst.

    1. 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:

    1. body.htmlarea-content-body a { color: #ff0000 !important; text-decoration:none !important; }
    2. body.htmlarea-content-body a:visited { color: #ff0000 !important; }
    3. body.htmlarea-content-body a:focus { text-decoration:underline !important; background-color: #fff !important; outline: 0.1667em #ff0000 solid !important; }
    4. body.htmlarea-content-body a:focus,
    5. body.htmlarea-content-body a:hover,
    6. 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:

    1. span.highlight, span.small-caps, span.dimmed, span.small, span.xsmall, span.tall, span.xtall,
    2. 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.

  • 1