2009-09-12 3 views
16

Ich habe gerade TinyMCE Editor für meine Website installiert. Der Standardhintergrund ist jedoch schwarz und die Textfarbe ist grau. Jeder kann mir sagen, wie ich den Hintergrund in Weiß und die Textfarbe in Schwarz ändern kann.Wie ändere ich den Hintergrund von TinyMCE?

Antwort

5

TinyMCE verwendet wahrscheinlich das Haupt-Stylesheet Ihrer Website. Und in diesem Fall ist es mit grauem Text auf schwarzem Hintergrund.

Alles, was Sie tun müssen, ist diese Art zu Ihrem Hauptsheet hinzufügen:

body.mceContentBody { 
    background: #fff; 
    color:#000; 
} 

und dann Cache schwer klar oder die Sitzung neu starten, damit TinyMCE die CSS frisch laden. Und dann zeigt Ihr Bearbeitungsbereich nun schwarzen Text (#000) auf weißem Hintergrund (#fff).

12

Oder Sie können die Farbe mit js ändern:

tinyMCE.init(
     mode : "textareas", 
     theme : "simple", 
     oninit : "postInitWork" 
    }); 

function postInitWork() 
{ 
    var editor = tinyMCE.getInstanceById('myEditorid'); 
    editor.getBody().style.backgroundColor = "#FFFF66"; 
} 
2

den folgenden Code zu dem Thema Sheet Hinzufügen funktionierte perfekt!

body.mceContentBody { 
    background: #fff; 
    color:#000; 
} 

ich auf diesem mir die Haare aus zog - und glauben Sie mir, ich habe keine Haare zu ersparen. :-) Vielen Dank!

+0

Richtig, aber sicher sein Eigenschaft background-image auszuschalten, hatte ich ein Problem mit Vererbung von Körper Hintergrund-Bild. Fügen Sie ** background-image: none; ** zu .mceContentBody-Format hinzu. –

1

Ran in die gleiche Ausgabe vor einem Moment und festgestellt, dass mein Problem verursacht wurde, weil die Haut (cirkuit) hat !important; hack über dies zu schreiben.

html, body { 
    background: #FFFFFF !important; 
    margin: 0; 
    padding: 0; 
} 
9

Ich rate Ihnen dringend, den tinymce Konfiguration zu verwenden Stile in tinymce zu beeinflussen, anstatt mit Kern CSS-Dateien von Hantieren.

Es gibt die content_css Einstellung, mit der Sie eine ccs-Datei angeben können, die das Standardverhalten (css) überschreibt. Das ist der Weg zu gehen. Sie können das CSS aus den anderen Antworten verwenden.

+0

Dies ist eine sehr gute Antwort auf das vorliegende Problem. – jerrygarciuh

7

BODY_CLASS hinzufügen wie folgt: Init:

<script type="text/javascript"> 
tinyMCE.init({ 
    mode: "textareas", 
    theme: "advanced", 
    theme_advanced_buttons1: "bold,italic,underline", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_default_foreground_color: "#FFFFFF", 
    body_class: "mceBlackBody" 
}); 
</script> 

Innerhalb content.css der richtigen Thema, einfach den folgenden Eintrag hinzufügen:

body.mceBlackBody {background:#000; color:#fff;} 

Dies wird der Körper schwarz und weiß den Text innerhalb machen der Editor

1

Ich würde vorschlagen, dass Sie die CSS-Datei content.min.css in Ihrem Themenverzeichnis ändern. Ändern Sie die Definition von

body{background-color:#595345;} 

auf alles, was Ihr Wunsch