Thema: Hintergrundfarbe und/oder Schriftfarbe des Editoreneingabefeldes verändern

Stand: 2006-09-16 (Änderungen möglich)

Dieser Thread ist veraltet. Es reicht heute aus, eine editor.css einzubinden, die über die Konfiguration des
Editors gesondert den Inhaltsbereich stylt. Alternativ verfügen alle Editoren über Defaultbedingungen,
die man auch in der Konfiguration aktivieren kann. Je nach Editor ist das unterschiedlich.

Lest bitte den gesamten Thread, da sich im Laufe der Zeit ständig etwas verändert hat.
Das Prinzip bleibt allerdings immer das Gleiche: Editoren CSS erstellen und einbinden.
Das Einbinden funktioniert inzwischen bei vielen Editoren im Backend unter Mambots -> Site Mambots -> jeweiliger Editor
Viele Editoren verfügen aber auch schon standardmäßig über eigene CSS Dateien.
---

1) Schritt (i.d.R. nur bei mosCE und tinymce)
Kopiert die template_css.css, zu finden im Ordner css, des verwendeten Templates z.B. per FTP auf euren Rechner. Verändert die Einstellungen bezüglich des Eintrags body. Alle anderen Definitionen können erhalten bleiben - es werden zwar die wenigsten für den Editor benötigt, aber sie stören aber nicht weiter. Beispielweise werden Listenpunkte oder Verweise so wie im Frontend angezeigt, wenn man diese Definitionen auch in der editor_css.css aufführt.

Sinnvoll wären die folgenden Angaben für den Eintrag body (andere Angaben bitte löschen):

Code:

body { color:black;background:white;margin:5px; }

Nun speichert ihr die Datei unter dem Namen editor_css.css und kopiert diese Datei per FTP zusätzlich zur template_css.css Datei in den css Ordner eures Templates. Verwendet ihr mehrere Templates solltet ihr jeweils das CSS verändern und uploaden, das für das jeweilige Template zuständig ist.

2) Schritt

Die weiteren Vorgehensweisen sind Editorenabhänig.

mosCe: Im Backend geht ihr auf den Menüpunkt components/Komponenten und ruft den Punkt mosCE Admin auf. Im mosCE Admin findet ihr die Editor Options. Dort tragt tragt ihr zunächst den Namen eurer CSS Datei im Punkt Custom CSS File ein (hier wäre das editor_css.css) und stellt sicher, das für den Punkt Override Template CSS "JA" ausgewählt wurde. Ihr solltest nun beim Aufruf des mosCe Editors ein weißes Feld mit schwarzer Schrift vorfinden.

--

tinymce: Den Pfad zur CSS Datei für den tinymce könnt ihr in der Datei tinymce.php ändern. Diese Datei findet ihr im Ordner mambots/editors/. In der Zeile 88 verändert ihr den Pfad zu CSS Datei.

Code:

$content_css	= 'content_css : "'. $mosConfig_live_site .'/templates/'. $template .'/css/template_css.css"';

Für unseren Fall würden wir nun den Pfad ändern auf:

Code:

$content_css	= 'content_css : "'. $mosConfig_live_site .'/templates/'. $template .'/css/editor_css.css"';

Auch hier solltet ihr nun beim Aufruf des tinymce Editors ein weißes Feld mit schwarzer Schrift vorfinden.

--

TMEdit: Im Backend gibt es eine Parametereinstellung für diesen Editor.
Mambots -> Site Mambots -> TMEdit -> Parameter: CSS Preview

Wird "NO" ausgewählt werden die Defaulteinstellungen verwendet. Diese sind in der tmedit.php im Ordner mambots/editors/ in Zeile 114 definiert.

Code:

body {background: white; margin: 5px;} body, td, p {font-family: sans-serif; font-size: 12px;}

Wird "YES" ausgewählt wird die template_css.css des Templates verwendet.
Den Pfad findet ihr in Zeile 110 in der Datei tmedit.php im Ordner mambots/editors/.

Code:

config<?php echo $name ?>.pageStyle='@import url(<?php echo $mosConfig_live_site ."/templates/". $template ."/css/template_css.css";?>);' ;

Auch dort könnt ihr den Pfad anpassen, wenn ihr eine andere CSS Datei verwenden möchtet.

--

fckeditor: Der fckeditor verwendet standardmäßig ein eigenes CSS Dokument. Dieses findet sich im Ordner: mambots/editors/fckeditor/editor/css/
Die entsprechende Datei heißt: fck_editorarea.css
Hier sind die Standardeinstellungen bereits so getroffen worden, dass keine Änderungen notwendig sein sollten.
Möchte man aber auch hier eine andere CSS Datei einbinden, findet sich der Pfad in der Datei fckconfig.js in Ordner: mambots/editors/fckeditor/

Zeile 25:

Code:

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;

--
Anmerkung:
Stellt sicher, das ihr auch den "richtigen" Editor verwendet. So wurde z.B. die CSS Datei für den Editor richtig hochgeladen, alle Einstellungen im mosCE Admin richtig vorgenommen, aber trozdem waren keine Veränderungen im Editorfeld auszumachen. Der betroffene User verwendete dabei gar nicht den mosCE als Editor, sondern den tinymce. Stellt also vor allen Einstellungen sicher, dass im Backend in der Global Configuration im Punkt Default WYSIWYG Editor auch der Editor ausgewählt ist, mit dem ihr arbeiten möchtet. Zudem kann jedem Benutzer ein unterschiedlicher Editor zugewiesen werden. Beachtet also auch die Einstellungen im User Manager. Dort findet ihr in den Parameters/Parametern die Auswahl für den User Editor.

Danke

Gruß

Andreas

Habe auch diese Problem weisser Hintergrund und weisse Schrift im TINYMCE.

Habe mich durch die Anleitung vom Anfang dieses Posts gearbeitet (wobei die Änderungen der Zeile nicht mehr genau so abläuf wie beschrieben, da sich der code in der tinymce.php ein wenig geändert hat) ohne Erfolg.

Benutze Joomla 1.07. Jemand ne Lösung.

Achso vorher hatte ich Joomla 1.04 laufen und da hatte ich die Hintergrundfarbe vom Frontend (dunkel blau). Da konnte man mit leben.

Zitat von upstream.li

Mambots - Site Mambots - TinyMCE WYSIWYG Editor
Parameters Custom CSS Classes dort lässt sich dann ganz einfach eine editor.css angeben.

super das hat mir geholfen. Für alle die auch mal bei diesem Problem landen.
Bei mir hats so funktioniert:
Ich habe die css vom template kopiert und dort die werte f&#252;r <p> <td> die in meinem templates auf wei&#223; (FFFFFF) stehen auf schwarz(000000) ge&#228;ndert.


NOCH NE FRAGE: Wenn ich im TINYMSC-editor auf HTML Ansicht umstelle, zeigt er mir nur ein weisses Blatt (klar sollte hier sein das in der normal Ansicht TEXT und Tabellen angelegt sind). Schon mal davon geh&#246;rt oder gelesen?



Gru&#223; Propheus

Zitat von ecomeback

1) Schritt (i.d.R. nur bei mosCE und tinymce)
Kopiert die template_css.css, zu finden im Ordner css, des verwendeten Templates z.B. per FTP auf euren Rechner. Verändert die Einstellungen bezüglich des Eintrags body. Alle anderen Definitionen können erhalten bleiben - es werden zwar die wenigsten für den Editor benötigt, aber sie stören aber nicht weiter. Beispielweise werden Listenpunkte oder Verweise so wie im Frontend angezeigt, wenn man diese Definitionen auch in der editor_css.css aufführt.

Sinnvoll wären die folgenden Angaben für den Eintrag body (andere Angaben bitte löschen):

Code:

body{color:black;background:white;margin:5px;}

Nun speichert ihr die Datei unter dem Namen editor_css.css und kopiert diese Datei per FTP zusätzlich zur template_css.css Datei in den css Ordner eures Templates. Verwendet ihr mehrere Templates solltet ihr jeweils das CSS verändern und uploaden, das für das jeweilige Template zuständig ist.

2) Schritt
Die weiteren Vorgehensweisen sind Editorenabhänig.

tinymce: Den Pfad zur CSS Datei für den tinymce könnt ihr in der Datei tinymce.php ändern. Diese Datei findet ihr im Ordner mambots/editors/. In der Zeile 88 verändert ihr den Pfad zu CSS Datei.

Code:

$content_css	= 'content_css : "'. $mosConfig_live_site .'/templates/'. $template .'/css/template_css.css"';

Für unseren Fall würden wir nun den Pfad ändern auf:

Code:

$content_css	= 'content_css : "'. $mosConfig_live_site .'/templates/'. $template .'/css/editor_css.css"';

Auch hier solltet ihr nun beim Aufruf des tinymce Editors ein weißes Feld mit schwarzer Schrift vorfinden.

Hallo!

Wenn ich wie oben beschrieben vorgehe,d ann habe ich zwar im Editor ein weißes Bearbeitungsfeld mit schwarzer Schrift, jedoch fehlt der eigentliche tinymce Editor. Also die kompletten Button wie Bild einfügen, Hyperlink, Format, Schriftart usw usw Sprich nichts läßt darauf schließen,d ass es sich um den tinymce Editor handelt.

Was könnte ich falsch gemacht haben?


Gruß,
DrPepper