htmlArea RTE formatierung

Hallo,

ich muss nun doch mal die Experten fragen 😉
Immer wieder werde ich mit dem Thema Textformatierung konfrontiert und habe immer noch keine anständige Lösung. Wenn ich jemandem Typo3 zeige muss ich mich immer wieder beim Inhalte pflegen schämen weil nichts funktioniert wie es soll.

Ich habe ein aktuelles Typo3 4.4.x aufgesetzt und das Typo3 für meine Seite konfiguriert. Nun habe ich die css_styled_content eingebunden. (braucht man die überheupt oder gibt es auch bessere Wege?)

Wenn ich dann im Editor etwas eingebe werden im Fronten z.B. folgende Tags im Code angezeigt: <div id="c12" class="csc-default" > oder <p class="align-center">.
Das ist ja auch sinnvoll weil alles mit divs und Klassen formatiert ist. Nur keine Formatierung wird standardmäßig beachtet. Ich vermute es fehlt die CSS-Definition.

Aber es kann doch nicht sein das ich alle CSS-Klassen mühsam in eine CSS-Datei stecken muss.
Es sollte doch eine Anfangskonfiguration geben wo diese ganzen CSS-Klassen schon korrekt beschrieben sind und dann auch im Frontend alles korrekt angezeigt wird?

Das sollte ja eigentlich ein Lösbares Problem sein weil was bringt mir ein super tolles CMS wenn ich nicht einmal komfortabel meinen Text formatieren kann.

Im Prinzip möchte ich ja nur den Text im Forntend so sehen wie ich ihn im Backend eingebe.

Gruß Manuel

Hallo,

eigentlich sollte der RTE m. W. die default-Stile automatisch in einer CSS-datei laden. Warum er das bei dir nicht macht, weiss ich nicht. Aber die Lösung ist recht simpel. Füge einfach diese Stile hier (es sind die default-Stile) in dein CSS ein:

/****************************************************************************************
# Default css file for content edited with htmlArea RTE
#
# Defines a few class selectors that can be simply taken as examples by anyone who needs to configure the RTE.
# This css file is referenced by property RTE.default.contentCSS in the default configuration of htmlArea RTE.
#
# TYPO3 SVN ID: $Id: default.css 6539 2009-11-25 14:49:14Z stucki $
# ***************************************************************************************/

/* Left, center, right and justify alignment of text in block elements*/
p.align-left, td.align-left, th.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, div.align-left, address.align-left { text-align: left; }
p.align-center, td.align-center, th.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, div.align-center, address.align-center { text-align: center; }
p.align-right, td.align-right, th.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, div.align-right, address.align-right { text-align: right; }
p.align-justify, td.align-justify, th.align-justify, h1.align-justify, h2.align-justify, h3.align-justify, h4.align-justify, h5.align-justify, h6.align-justify, div.align-justify, address.align-justify { text-align: justify; }

/* Two frame examples taken from the example CSS file of CSS Styled Content extension and applied to p and table block elements.*/
p.csc-frame-frame1, table.csc-frame-frame1 { background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
p.csc-frame-frame2, table.csc-frame-frame2 { background-color: #F5FFAA; padding: 2px 4px 2px 4px; border: 1px solid #333333; }

/* Bullet styles for unordered lists.*/
ul.component-items { color: #186900; list-style-type: circle; }
ul.action-items { color: #8A0020; list-style-image: url(img/red_arrow_bullet.gif); }

/* Numbering styles for ordered lists.*/
ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }
ol.action-items-ordered { color: #8A0020; list-style-type: lower-greek; }

/* Three inline text colors taken from the color scheme of CSS Styled Content extension.*/
span.important { color: #8A0020; }
span.name-of-person { color: #10007B; }
span.detail { color: #186900; }

/* Selectors for the default configuration of the link accessibity feature.*/
a.external-link {}
a.external-link-new-window {}
a.internal-link {}
a.internal-link-new-window {}
a.download {}
a.mail {}

/* Default selector for indentation.*/
div.indent { margin-left: 2em; }

Hat auch den Vorteil, dass du das Aussehen so gut anpassen kannst. Abstände etc.

Gruß
Peter, TYPO3 @ lisardo (Augsburg)

Danke für den Tipp Peter. Dieses File ist als default schon vorhanden.

Manches funktioniert ja an der Formatierung.
Aber Klassen wie "csc-default" oder "align-center" sind ja nicht in diesem File enthalten.

Funktioniert die Formatierung bei euch allen out of the box?

Gibt es noch ein Konfigurationsfile welches alle Klassen beinhaltet?

Gruß Manuel