JCE editor styles – and re-visit editor background color problem…
This topic came up at Joomla! Day New England — how to get template styles to show up in jce styles dropdown and to affect the content in the editor window.
For some time now I have been installing the JCE editor for my clients to use on their Joomla sites. And each time I have to make a decision about how to configure the editor, because this can be done in different ways and “It Depends…” is always the right answer.
Here are a few possible issues:
1. If the site has a colored background or image for the body tag, then the editor will also display that background — and it’s hard to edit black text on a dark background!
2. Some templates include css something like this:
body { text-align:center ; /* for ie */ } div#wrapper { text-align:left; /* reset text alignment */ width:748px; /* or a percentage, or whatever */ margin:0 auto; /* for the rest */ }
This was for early versions of IE and we no longer need to use text-align:center; in order to center the page in the browser window, but… if you have these styles, then everything is going to appear centered in the editor window if you use template.css styles.
3. If I want the client to be able to choose and apply special styles to the content, I need to think about what’s enough and what’s too much.
Back in May of 2009 I posted about a solution for the background color issue — it was coming up with WYSIWYG-Pro.
That solution involved modifying the template’s html to include a class on the body tag. And then, in template.css, set
body {background-color:white;} — this will be in play in the editor window
body.body {background-color:dark;} — this will be what displays as the background when site is viewed in a browser.
This works if you configure JCE to use the template.css styles.
But.. This will also display all classes used in your template.css including things like .moduletable and .menu. On a large site with many custom styles, this could be overwhelming, when all your client needs is the ability to use a few styles for controlling floated images, or a style for .quote, .quotee, or .alert.
In this case, I would opt to NOT use the template.css file, and to create a special editor_content.css file, including only the classes and styles that I need the client to have access to.
If I choose to create a separate editor_content.css file, there is no need to add the class to the body tag, as I can create a rule setting a white or light body background (and aligning text) that will apply in the editor window.
Tags: css, JCE, Joomla!, WYSIWYG editor