CKEditor with dark background

I have a website with dark background and light colored text and needed some WYSIWYG editor for on of the forms. Only special requirement is support for smileys. I considered:

• CKEditor
• TinyMCE
• openwysiwig
• Xinha
• wmd

wmd is not WYSIWYG, so that one was off. openwysiwig was easiest to configure, but same as Xinha it did not have simleys. So, I was left with “power” ones.

First I tried TinyMCE. It was rather easy to configure to be used with dark background, but it’s smileys have a few-pixel white border around them and it looks really ugly. I guess I could have created my own smileys or edited those provided, but I just wasn’t ready to invest that kind of effort.

So, I tried with CKEditor. Setting it up makes me never want to create a dark website anymore :(

There are multiple problems that you need to tackle:

1. In contents.css, set something like this:

body 
 { 
 color: white; 
 background-color: black; 
 } 

2. in config.js you could set: config.uiColor = ‘#000’;
but then the dialogs (special character, smiley, link editor, etc.)
will look really ugly, and text of labels would not be readable (black
text on black background). To work around this, I left the default
uiColor (to make sure dialogs are ok) and added a style that .uiColor
setup would create (determined by Firebug). After your ckeditor
declaration in HTML file, add this:

<style>
 .cke_editor_editor1 .cke_wrapper { background-color:#000 !important; }
 .cke_editor_editor1_dialog a.cke_dialog_tab { background-color:#999
 !important; }
 </style>

I used #999 for dialog tabs, but this is really not needed (it looks
nice though)

3. the final obstacle was color of links. If you have A tag present in
your textarea it will be rendered as blue, which has almost no
contrast against black. To change this, I added the following to my
CSS file:

.myckeditor a { color: yellow; } 

and forced CKEditor to use it via the following setting in config.js

config.bodyClass = 'myckeditor'; 

This made it work… well, sort of. If link was already present in
works in all browsers. But if you add a link using the “link” button,
it would work properly in IE and Opera, but not Firefox (tested with
Firefox 3.0). Interesting enough, debugging it with Firebug shows the
correct CSS color being used, although it is not shown on screen. The
trick is to add !important to CSS:

.myckeditor a { color: yellow !important; } 

Another tip for the end: CKEditor has a context menu which replaces
the default menu so you cannot click some text inside the editor
control and use “Inspect element” opcion of Firebug. To work around
this, add the following to your config.js:

config.browserContextMenuOnCtrl = true; 

now, you can invoke the default context menu by holding down Ctrl key
while pressing the right mouse button.

enjoy…

Tweet to @mbabuskov Tweet Milan Babuškov, 2010-07-15