TineMCE Hintergrund anpassen

[nicknolte]

Hi,

ich nutze für die Schrift auf einer Webseite #fff. Da der Editor die gleiche Schriftfarbe wie auf der Webseite nutzt und gleichzeitig die Hintergrundfarbe weis hat, sehe ich nun keinen Text...

In der Anleitung "https://contao.org/tinymce-anpassen.html" konnte ich keinen Hinweis dazu finden und das Wiki unter "http://wiki.moxiecode.com/" gibt den Eintrag "theme_advanced_background_colors : "FF00FF,FFFF00,000000" her.

Diesen Eintrag habe ich zwar in die "tineMCE.php" eingefügt und entsprechend geändert, aber leider tut sich nix.

Habt Ihr ne bessere Idee?

Grüße

[simplex3]

Moin nicknolte,
das ist auch nicht das, was du willst. Diese Einstellung ändert die verfügbaren Farben in der Farbauswahl für die Texthintergründe.
Was du suchst, müsste das hier sein:

Change default text color/editor background in TinyMCE?

You need to specify a content css file with the content_css option in order to change the default text color or background of the editor. The specified CSS is loaded after the default CSS so you can use it to override. A good idea to check the CSS status of elements is to install Firebug addon to Firefox.

Bis denne..

[nicknolte]

Vielen Dank,

ich habe damit auch schon gespielt, da TL die "basic.css" in der tinemce.php läd, habe ich die kurzerhand umgenannt. D. h. ich verwende keine basic.css und es geht soweit ganz gut. Das Neuformatieren von tinemce ist nicht ganz so einfach, da sonst auch ggf. Rahmen und andere Elemente nicht mehr angezeigt werden.

Grüße

[Andreas]

Hallo Nick Nolte,

kopiere die tinyMCE.php und benenne die Kopie um in tinyCustom.php. Dann füge folgende Zeile in deine dcaconfig.php ein:

// Die eigene RTE-Konfiguration für Text-Elemente verwenden
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom'; 

Dann füge in der tinyCustom.php folgende Zeile ein, oder ändere die vorhandene Zeile:

content_css : "<?php echo TL_PATH; ?>/tl_files/css/meine.css,<?php echo TL_PATH; ?>/tl_files/css/auchmeine.css",

Wie du siehst kannst du dort eine kommaseparierte Liste mit CSS-Dateien einfügen, welche den Inhalt von TinyMCE formatieren sollen.

Andreas

[nicknolte]

Jo, habe es so getestet, aber das ändern der Farben ist nicht ganz so einfach und will gut überlegt sein.

Grüße

[Nina]

Wenn du nur ein paar CSS-Anweisungen für den TinyMCE machen willst, kannst du das ganz einfach (ohne Custom-Angaben in der dcaconfig) machen:

Binde einfach eine CSS namens basic.css in den Stylesheet-Generator vom TYPOlight-Backend ein. Der TinyMCE liest diese Datei aus und versucht die Angaben darin auch für sich umzusetzen.

Wichtig: Nutze möglichst einfache Definitionen in der basic.css, da der TinyMCE nicht der klügste im Umgang mit komplexen Definitionen ist

Wichtig 2: Ich definiere in der basic.css gerne allgemeine Basisdefinitionen die sowohl für das Website-Layout, als auch für den TinyMCE gelten sollen (z. B. Überschriften H1-H6, Link-Darstellung, Abstände für Absätze/Listen/etc.). Dadurch ist die Ausgabe identisch und die Redakteure können leichter damit umgehen.

Wenn du unter diesem Umstand dann mal eine Angabe ausschließlich für den TinyMCE machen willst, kannst du auch Definitionen nur für ihn hinterlegen. In deinem Fall wäre das z. B so, damit der Hintergrund des TinyMCE weiß und die Schrift schwarz ist:

body#tinymce { background-color: #fff; color: #000; }

Wichtig 3: Wenn du alle Einstellungen in der basic.css gemacht hast, musst du dich am besten aus TYPOlight abmelden und dann den Cache deines Browsers löschen. Sonst lädt dein Browser die basic.css für den TinyMCE nicht neu, sondern nur aus dem Cache.
Nach dem Anmelden, sollten nun im TinyMCE die eingestellten Anweisungen sichtbar sein.

[felixpfeiffer]

Hallo Nina,
leider hat Dein Tipp nicht ganz bei mir funktioniert. Aber folgende Definition hat das ganze glöst:

body#tinymce p { color: #000; }

Damit wird der Text schwarz.

Gruß, Felix

[Nina]

Der Hinweis sollte natürlich nur als Ausgangsbasis für das CSS dienen. Je nachdem was man sonst noch so in der basic.css definiert hat, muss man bei Bedarf (so wie in deinem Beispiel) noch ein paar weitere Anpassungen machen