When you open up JCE editor you see the following black background.

• This does not occur when i use tinyMCe
• Reset Editor Styling make no difference
• jce 2.3.4.4, joomla 3.3.0 does not do it
  jce 2.4.2 joomla 3.3.0 does not do it
  jce 2.4.2 joomla 3.3.3 does not do it
• browser makes no difference

Causes

• JCE is possibly incorrectly loading CSS files

• compressing of JS and CSS files in JCE editor causes this + set use Default.css in JCe configuration. this fixes it (not custom or template). it must be getting the html{} setting from a template and then when you comperesss it, JCE stores a cached version somewhere. turning the css and js compression of must purge its cache.

• This black background can be template specific
• Template JS and CSS compressors are causing issues
• 3rd party JS and CSS compressors (not come across this yet but is a logical extension)

• the template.css has a statement in setting the background for HTML or BODY

  html{
  	background-color:#000
  }

  or

  body{
  	background-color:#000
  }

Solutions

Make sure you disable your cache while trying to get this to work, especially in firefox where i disable cache using the Web Development Toolbar.

Disable CSS and JS compression in

• JCE editor
• your template
• in any plugins that do these functions

You should be able to get away with just disabling CSS compression and once you identify the dodgy compressor you can turn the others back on.

Edit the template.css

the offending line in template.css might vary but it is most likely the following or similiar:

html {
	background-color: #000;
}

or

body {
	background-color: #000;
}

If you edit this template.css this will change the styling globaly and might affect the template as a whole, so this method should not used routinely

Add editor specific code to your template.css

you can add the following to your template.css file (not good to edit direct on template files) to overide this for the JCE editor only
i have not found any that works but you need to attack the BODY or HTML tag with a class similiar to .mceEditor only {add code here}

These will get removed if you upgrade the template, but are not hard to re-add.

Examples

.mceContentBody html {background: white !important;}

.mceContentBody {
height: 100%;
min-width: 90%;
padding: 5px;
background: white !important; // Add background here
color: red !important; // Add color here
}

Edit the Editor content.css

some of this is taken from the joomlashine forum thread i was involved in here.

The CSS file to edit is located here

components/com_jce/editor/tiny_mce/themes/advanced/skins/default/content.css

Option 1

Add this code into the content.css

.mceContentBody {
height: 100%;
min-width: 90%;
padding: 5px;
background: black !important; // Add background here
color: white !important; // Add color here
}

This code also does not affect fonts in a table.

Option 2

edit the 2 following sections (if the content.css is not minified, if it is! figure it out)

body,td,pre{color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;margin:8px;}

body{background:#FFF;}

Option 3

At the very beginning of the content.css the HTML and BODY tags are reference

html,body{height:100%;}

change this to

html,body{height:100%; background-color: #FFF !important;}

This will change the background for both BODY and HTML style background setting to white

Also Try

• in configuration 'Reset Editor Styling' which will force black writing on a white background amongst other things. This will not work for all templates. This option will only reset backgrounds based on BODY and not HTML . You should not use HTML to theme a site anyway.
• de-select using template.css (from your template) as the styling css that is loaded by JCE. This is not a prefered options because you will loose some template specific styling.