Well this one had me stumped for quite a bit. I tried several different editors and all of them were totally willing to ignore the content styling from the front-end. This sounds like a minor issue but with a dark background and light text it could become problematic fast. This solution works, at a minimum, for JCE and probably many other MCE variants.
- Create or edit a stylesheet
My tools, by default, create an editor.css stylesheet. That's neat but it doesn't have the required items to style the editor content. - Find the body selector
Note, mine had more than one. You might want to just put your own down at the bottom. - Add the needed styling.
In my case, it looked like this:
body {
Note that every attribute is tagged with !important to ensure it doesn't get overwritten later.
color: #ffffff!important;
background-color:#1a1a1a!important;
font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif!important;
font-size:14px!important;
} - Save the stylesheet
- Flush any site caching going on
Not so much Joomla's content caching but any caching being done by your hosting provider. - Clear your browser's cache
Yes, this is really important. If you don't you will not see the changes. - Smile because things look right in your editor now.