CSS vom RTE einbinden

spongebob13 · 22. November 2010 01:58

Hallo Leute,

wie und wo kann ich eine CSS Dateie nur für den RTE einbinden. Ich habe das jetzt mit inline style gelöst, aber ich mag das nicht und deswegen will ich eine externe CSS!??

Bitte um Rat!

dvschuetz · 22. November 2010 19:33

Hallo,

Du kannst eine eigene CSS-Datei schreiben und in die CSS der Webseite einbinden.

Kopiere Dir aus folgenden Dateien raus, was Du brauchst:
typo3/sysext/rtehtmlarea/res/contentcss/content.css
typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css

in eine eigene, die Du unter fileadmin/.. ablegst und zum Beispiel RTE.css nennst.
Hier kannst du editieren.

Dann schreibst Du in Deine Haupt-CSS:

@import url(pfad/RTE.css)

Gruß Dietmar

Queron · 24. November 2010 09:44

Hi,

also erstmal erstellst du dir eine CSS-Datei mit allen Klassen, die du so gerne im RTE benutzen möchtest. Danach musst du in der TSconfig deiner Hauptseite (also unter Seiteneigenschaften -> Optionen) folgenden Code eingeben:

# Erst einmal die Klassen aufzählen. Bei 'value' kannst du die Einträge sogar stylen, z.B. mit einem Icon versehen (funktioniert aber nicht im IE, dafür im Firefox sehr gut).
RTE.classes {	
	
	default {
		value = padding: 5px;
	}
	
	deineklasse1 { 
		name = Formatierung 1
		value = padding: 5px 3px 5px 48px; border-top: dotted 1px #aaa; background: url(../fileadmin/template/main/img/rte_icons.png) no-repeat 3px 0 #fefefe;
	}
	
	deineklasse2 {
		name = Formatierung 2
		value = color:#003388;
	}		
}


## Konfiguration
RTE.default {
	
	# Zuweisung der CSS-Datei
	contentCSS = fileadmin/deinpfad/rte.css
	
	# Jetzt noch einmal in den Klammern alle Klassen aufzählen, die man oben angegeben hat
	proc.allowedClasses = (deineklasse1, deineklasse2) 
	
	# Jetzt die Klassen den Arten von Elementen zuordnen:

	#Klassen, die in der Auswahl für Blockelemente erscheinen sollen
	classesParagraph = deineklasse1

	#Klassen für Inline-Elemente
	classesCharacter := addToList (deineklasse2)

	#Klassen für Bilder
	classesImage = links, rechts, clear, rahmen_1px, rahmen_3px

	#Klassen für Tabellen-Elemente
	classesTable = linien

	#Klassen für Tabellenzellen, <td> und <th>
	classesTD = kategorie, adresse

	# Festlegen, ob auch Klassen aufgelistet werden sollen, deren HTML Element nicht definiert ist
	showTagFreeClasses = 0
       }

In der CSS-Datei musst du die Klassen wiefolgt angeben:

p.deineklasse1, div.deineklasse1, ul.deineklasse1
	{
	border: solid 1px red;
	}

span.deineklasse2, b.deineklasse2
	{
	color: red;
	}

Manchmal gibt es Probleme mit dem Cache, wenn du in der RTE-CSS was veränderst, die Veränderungen im RTE aber nicht übernommen werden - evtl. ist das mit der neuen Funktion "RTE-Cache löschen" in den neuesten TYPO3-Versionen behoben. Ansonsten die CSS-Datei direkt im Browser aufrufen und mit Strg+F5 aktualisieren.

spongebob13 · 24. November 2010 16:03

Hallo!
Ich habe das gelöst, aber er zeigt wir die Formatierungen nur im Editor an und nicht im Browser!??? Hab ne IE 8!!!

Bitte helft mir weiter, ich habe sonst echt keine Ahnung wie ich das lösen soll!!

Grüße

spongebob13 · 24. November 2010 16:08

Das ist mein Code:
in der TSConfig:
RTE.default {
contentCSS = fileadmin/template/css/rte.css
}

eine eigene CSS DAteie gemacht:

.htmlarea-content-body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
padding:3px;
background-color: #fff;
color: #000;
}

img {
border : none;
}
a {
color:#3f52a0;
text-decoration : none;
}
a:link {
color : #fff;
text-decoration : none;
}
a:hover {
color : #fff;
text-decoration : underline;
}
table, td{
background-color: #1f4f96;
color: #fff;
}
.external-link {
color:#3f52a0;
text-decoration : none;
}
.external-link-new-window {
color:#3f52a0;
text-decoration : none;
}
.internal-link {
color:#3f52a0;
text-decoration : none;
}
.internal-link-new-window {
color:#3f52a0;
text-decoration : none;
}
.download {
color:#3f52a0;
text-decoration : none;
}
h1 {
font-size : 22px;
margin : 0;
padding : 5px 5px 10px 0;
font-family : Verdana;
color : #3f52a0;
}
h2 {
font-size : 20px;
margin : 0;
padding : 5px 5px 5px 0;
font-family : Verdana;
font-weight : bold;
color : #df5511;
}
h3 {
font-size : 18px;
margin : 0;
padding : 3px 0 3px 0;
font-family : Verdana;
font-weight : bold;
color : #3f52a0;
}
h4 {
font-size : 16px;
margin : 0;
padding : 3px 0 3px 0;
font-family : Verdana;
font-weight : bold;
color : #df5511;
}
h5 {
font-size : 14px;
margin : 0;
padding : 3px 0 3px 0;
font-family : Verdana;
font-weight : bold;
color : #3f52a0;
}
h6 {
font-size : 12px;
margin : 0;
padding : 3px 0 3px 0;
font-family : Verdana;
color : #df5511;
}

Er nimmt mir zwar die Formatierungen an, aber nur im Editor nicht im Browser, liegt es an der Version! ?????????????

Danke für eure Hilfe!!

Queron · 24. November 2010 16:11

Hast du denn diese ganzen Formatierungen auch in der CSS-Datei der Website rüberkopiert?

spongebob13 · 24. November 2010 16:24

meinst du in der Haupt CSS-style.css!?? Das könnte sein!! Das ich das zwei Mal habe!!

spongebob13 · 24. November 2010 16:25

Ich habe jetzt geschaut. Ich habe das in der haupt CSS und in der rte.css!! Aber in der Haupt CSS habe ich nur ein paar Sachen formatiert. h1-h3!!!

spongebob13 · 24. November 2010 21:51

Hallo!!

ich habe das jetzt ausprobiert, so wie ihr mir das oben geschrieben habt, es funktioniert auch super. Aber wieso funktioniert es nicht im Browser?? Ist es Sinn der Sache, dass es auch im Browser funktioniert, oder nur für den Editor!??
Bitte gibt mir Bescheid, sitze an dieser Sache SEIT TAGEN!!!

Vielen DAnk!

lisardo · 24. November 2010 22:31

Hallo,

kontrolliere doch mal, ob im Frontend im Quelltest alles da ist:
Dein rte-CSS muss im Frontend unbedingt auch da sein, du muss also die rte.css entweder dazu laden oder das Haupt-CSS entsprechend erweitern. Alle Stile müssen im RTE und in der Frontendausgabe verfügbar sein. Der RTE arbeitet im Backend und greift auf die Stile zu. Speichern tut er nur das HTML, nicht das CSS! Deshalb muss die CSS-Datei (oder zumindest die CSS-Definitionen) im Frontend eben auch da sein.

Beachte auch die Reihenfolge: Wenn du im HauptCSS andere Definitionen machst, musst du die entweder rauslöschen, oder die RTE-Definitionen danach laden.

Gruß
Peter

spongebob13 · 24. November 2010 22:52

Hallo!!!

die rte.css ist im Frontend drinnen. hab´s gerade überprüft. Ich gebe es auf, ich finde den Fehler einfach nicht!! Bei mir funktioniert es einfach nicht!!

dvschuetz · 24. November 2010 23:01

Mir ist nicht ganz klar, ob du WIRKLICH neue Stile im RTE definieren willst.

Reicht es Dir nicht, wenn die Ausgabe im Frontend so ist, wie es der Kunde sehen soll?

Mein Tipp: Damit Du besser klar kommst, kümmere Dich doch erstmal nur um das Frontend und lasse den RTE wie er ist.
Wenn Du durch die FE-CSS-Klassen durchgesteigen bist - und das sind viele - , kannst Du ja immer noch an den RTE gehen - zunächst mit den Standard-klassen, also ohne neue zu definieren.

spongebob13 · 24. November 2010 23:13

noch einmal: ich habe einen Text im RTe eingegeben, der ist schon vorformatiert, das ist aber nicht die Formatierung, die der Kunde haben will!!! Wir wollen für Überschrift h1 andere Farbe- für eine Tabelle einen Hintergrund usw. Und das will ich ja ändern im RTE!? Bitte helft mir!

spongebob13 · 24. November 2010 23:16

Ich habe ja in der Haupt CSS h1-h6 formatiert, und wenn ich jetzt eine h1 im Editor schreibe und oben beim Blockstil das auswähle, dann kommt aber nicht diese Formatierung. oder ich möchte auch bei einem Link keine Unterstreichuung haben

dvschuetz · 25. November 2010 00:05

Also, es funktioniert genau so, wie Queron und ich geschrieben haben. Mehr kann ich dazu nicht mehr sagen, sorry.
Noch einmal grundsätzlich: Formatierungen im RTE haben erst mal GAR NICHTS mit der Darstellung im Frontend zu tun. Das ist hier kein WYSIWYG.

spongebob13 · 25. November 2010 00:22

OK. Jetzt bin ich wenigstens erleichtert. Jetzt weiß ich, dass ich es doch geschafft habe. hehe

Aber wie formatiere ich den Text, denn ich im RTE schreibe, damit er auch so im Frontend ausgegeben wird, wie ich dasd haben will!!!

Bitte um Rat!! Brauch dringend diese Formatierung im Frontend!!!!!!

DANKE

lisardo · 25. November 2010 00:23

also es tut mir leid, aber dein größtes Problem liegt darin, dass du dein Problem nicht richtig beschreibst.

in den ersten Mails hast du geschrieben:

> Er nimmt mir zwar die Formatierungen an, aber nur im Editor nicht im Browser, liegt es an der Version! ?????????????

> Ich habe jetzt geschaut. Ich habe das in der haupt CSS und in der rte.css!! Aber in der Haupt CSS habe ich nur ein paar Sachen formatiert. h1-h3!!!

also bin ich bisher davon ausgegangen, dass dein CSS im RTE geladen wird, und die Darstellung um RTE selbst stimmt, aber nicht im Frontend.

Jetzt kommt:

> noch einmal: ich habe einen Text im RTe eingegeben, der ist schon vorformatiert, das ist aber nicht die Formatierung, die der Kunde haben will!!!

Also scheint es im RTE doch nicht zu funktionieren. Was gilt denn jetzt? Stimmt es im Frontend? im RTE, oder in beiden nicht? Nach so vielen Posts habe ich immer noch keine Ahnung, was jetzt Sache ist.

Deine vielen Ausrufezeichen und die ganze Erregung hilft dir leider gar nichts, wenn wir dich nicht verstehen. Bitte schalte einfach mal zwei Gänge runter, besorge dir ein kleines Bierchen, und wenn du es getrunken hast, dann versuche mal ganz genau zu beschreiben, was eigentlich wie jetzt funktioniert oder nicht funktioneirt, damit wir nicht alles erraten müssen.

1. welche Formatierung siehst du im RTE im Backend?
2. stimmt das mit den Formatierungen überein, die dort sehen willst?
3. welche Formatierungen erscheinen im Frontend auf der Webseite?
4. stimmen diese mit dem überein, was du erreichen willst?
5. wenn du im Backend eine Klasse zuweist, erscheint diese auf der Webseite im Frontend im HTML? Im meine im HTML, nicht das Aussehen!
6. suche eine Überschrift raus, die nicht stimmt, und poste hier mal:
- wie es im CSS des RTE definiert ist,
- wie es im CSS des Frontends definiert ist,
- und welche davon richtig und falsch ist.

Ansonsten mach mal folgendes: rufe die CSS-Datei des RTE direkt im Browser auf:

http://www.deineDomain.de/fileadmin/template/css/rte.css

und schau nach, ob sie stimmt. Falls nicht, mach einen Reload mit gedrückter Umschalttaste, solange, bis es stimmt. Es könnte sein, dass der Browsercache ein Problem macht.

7. Hast du das hier:

RTE.default {
contentCSS = fileadmin/template/css/rte.css
}

auch wirklich in die TSconfig geschrieben? Also in die Seiteneigenschaften deiner Hauptseite?

Wenn du kannst, poste eine URL, damit wir was sehen.

Gruß
Peter, TYPO3 @ lisardo (Augsburg)

spongebob13 · 25. November 2010 00:35

Sorry, das macht mich echt zu schaffen, da ich seit Tagen dasitze und es passiert nicht!!
Ich werde mir in aller Ruhe meine CSS anschauen und werde mich wieder melden(aber wahrscheinlich erst morgen)!!

Sorry für die Verwirrung!

bin ja auch selber verwirrt!

Grüße

Queron · 25. November 2010 09:03

Ich kann dir erstmal nur diesen Rat geben: Installier dir Firefox, dazu das Add-on "Firebug" und dann untersuche die Elemente, die du stylen möchtest, daraufhin, welche Formatierungen aus welchen CSS-Dateien Einfluss auf das jeweilige Element haben und welche Formatierungen evtl. überschrieben werden.

spongebob13 · 25. November 2010 16:01

Ich habe es gelöst. Im Nachhinein gab es eigentlich gar kein Problem. Ich habe in meiner Haupt CSS die ganzen Sachen formatiert h1-h6, p, a:link usw. Er hat es dann automatisch im Frontend übernommen. Und ich sitze seit TAgen daran. Echt schlimm!!! Ich dachte mir immer, ich muss den RTE formatieren, damit er mir dir Formatierung auch im Frontend übernimme!!!!!

Vielen Dank für eure Hilfe und die Tipps!!

Viele Grüße