Fresh Blurbs

Fix: Garbled TineMCE Windows in Drupal

A lot of nice Drupal themes have HTML body styled with fancy backgrounds. Unfortunately, most of the theme authors do not test their themes with a popular WYSIWYG editor module TinyMCE. If they did, they would notice how bad the text entry window looks with their themes on:\

As you can see, the body background affects TinyMCE text entry window, as well. This is because that "window" is actually a separate HTMl document with its own body that also gets affected by the style setting. Ouch!

The fix is trivially easy, now that we know what's going on. Edit the theme's style-sheet, to add an instruction:

body.mceContentBody {
    background: white;
}

The problem should be gone. I wish theme designers payed more attention to this detail, though. TinyMCE is used all over the place, and as a matter of fact, I am almost sure all other WYSIWYG editing modules have similar problems, too, as they need to use sub-document for editing.

comments powered by Disqus