Using TinyMCE for sites with a dark background

Question

I'm using django-tinymce in my Django website. Through the admin interface one can edit a SimplePage object which has a tinymce.models.HTMLField. The website visitor will then see the html rendered in the content area of the page.

Problem is, the website itself has a dark background, and the TinyMCE textarea has a white one. By default the text seems to have no color, which is okay (It appears as black in TinyMCE and as white in the website) but sometimes a black color is assigned to it and then it appears as black in the website, which makes it unreadable.

What's a good way to solve this?

Answer 1

Usually in a Rich Text Editor, you would specify a style sheet (the original page's style sheet or a variation of it) as the style sheet for the editor. That way, all the basic text characteristics (size, family, colour and background colour) are really What You See Is What You Get.

I think this is it:

Option: content_css

This option enables you to specify a custom CSS file that extends the theme content CSS. This CSS file is the one used within the editor (the editable area). This option can also be a comma separated list of URLs.

If you specify a relative path, it is resolved in relation to the URL of the (HTML) file that includes TinyMCE, NOT relative to TinyMCE itself.

Answer 2

You can customize the CSS of the editable area with the content_css setting, see: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css

This also works with django-tinymce, simply adjust TINYMCE_DEFAULT_CONFIG in your django settings:

TINYMCE_DEFAULT_CONFIG = {
    # your other settings
    'content_css': '/media/css/main.css',
}