WYSIWYG editors spec – Importing CSS

The second building block of a modern WYSIWYG editor is how the styles are defined and added for the structural HTML.

The output is easy to define, building on what HTML should be allowed: Styles must be applied by class to standard HTML.

What is not so easy to define is how the CSS should get into the editor, and how it is used. This aspect underpins the ATAG checkpoint: Help the author create structured content and separate information from its presentation.
It is also a vital part of the customisation process when installing an editor, as the content edited should also look right.

The CSS need not be used whilst editing, you could have a fairly bland editing environment that only deals with structural HTML and does not style it:

A basic looking editor showing a heading, paragraph and list.

However, this is not very “WYSIWYG”, and if custom styles are applied it’s difficult to tell. What you really want is for the editor to read the CSS and use that whilst editing.

There are several broad options on how that could be done, the editor could:

Use a separate style sheet or configurations
One method is to use specific customisation to show/use particular class and styles, e.g. use a special style sheet that you create for the editor. This style sheet would roughly match your main styles, but is aimed purely at the editor. The editor could then draw the options for classes from that file.
Use parts of the main styles
The editor would load the standard CSS file(s) and look for particular aspects within the standard CSS file. There are a few ways this could be accomplish, such as:

  • Using anything that begins with #content (or whatever specified). Then a class like #content .alignleft would add an ‘alignleft’ option for styles.
  • The editor could load the style sheets and look for comments to show which styles to use. E.g. /* [editor styles start] */
    The styles after this comment would then be used by the editor, and any class found would be added to the options in the editor.
Use all the CSS
The editor would load the standard CSS file(s) and use them wholesale, making all the classes found available in the editor.

Dynamic style drop-down

Whichever of the above methods is used (and there are probably more), the ideal would be to only have relevant styles available depending on what element is currently selected.

For example, if there is a style called “square-bullets”, which is intended to change the bullet used in ul elements, then it would only be available if you have a list selected.

TinyMCE editor with a list highlighted in the editing area, and the styles drop-down only has a style called square-bullets.


TinyMCE allows quite a few of the options outlined. Using all the CSS is probably the quickest option for the developer, but it has some drawbacks as you can see from the result for this site:

Screen shot of the TinyMCE editor with the styles drop down showing lots of options.

Only half of the classes I would actually want to appear, the rest are for template elements. Adding a style sheet (configuration) isn’t enough in itself.

You can override this behaviour in TinyMCE, by using the advanced styles configuration. This overrides the style sheet classes so that you can select a sub-set of classes to include.


TinyMCE can load a separate style sheet, or it can use all the CSS and you can over-ride which styles are available to authors in the interface. However, if you do load all the CSS for a site (like this one), it is likely that it will not appear as intended, you would probably have to create an editor specific style sheet.

Also, TinyMCE is not restrictive in what element(s) you can apply a particular style to, so you could apply a style from the interface intended for images to other elements as well. (It adds a class to the element if the whole element is selected, or adds a span around sections of text.)


Whereas TinyMCE keeps all the configurations in one file, FCKeditor has several separate files for styles. I removed quite a lot of the toolbar, and the edited the XML style file.

This XML file can be used to restrict the use of each style more than TinyMCE, for example this statement in the file:

<Style name="Image float Left" element="img">
    <Attribute name="class" value="alignleft" />

The element="img" means that style will only be applied if an image is selected. This is a definite improvement, and if that drop-down hid irrelevant items dynamically, would be exactly how I envisioned the dynamic styles working. (Unfortunately it doesn’t, all the styles are available all the time.)

FCKeditor allows you to add an external style sheet with a simple configuration:

FCKConfig.EditorAreaCSS = '/myownstyles.css' ;

This style sheet is used to show styling whilst editing. It is not used to find classes to include in the styles drop-down, the XML file is the only source of selectable styles.

In common with TinyMCE, if you simply load a sites style sheet it probably won’t appear as you intended, in the case of this site it’s probably due to not having a <div id="content"> to get some of the inherited styles right:

FCKeditor with the styles loaded. The content area has a gray background instead of white, and the bullets don't have any padding.

Without the option to direct the editor to specific parts of the CSS files, you would have to create a separate style sheet for the editor to use.


FCKeditor does well for a JavaScript based editor. The XML file format is slightly easier to edit than a JavaScipt configuration, and the mechanism allows a slightly more restricted application of the styles in the editor. Like TinyMCE, you would probably have to create an editor specific CSS file for it to display properly.

Xstandard (Lite)

Xstandard also allows the importing of a style sheet, because the editor loads is in object in the HTML page, you add a parameter to the object pointing to the style sheet:

<param name="CSS" value="http://myserver/format.css" />

In a similar way to the other editors, you would want to create you’re own style sheet for the editor, background images and colours don’t often translate well:

screen shot of the Xstandard editor with example content. The list items have the background image incorrectly stretched across the list item.

In common with FCKeditor, you can use an XML file to define what styles and to some extent the HTML that is available. This is two example style declarations:

  <label xml:lang="en">Bold</label>

  <label xml:lang="en">Highlights</label>

(NB: The language attribute is because you can have several labels in different languages.)

In testing this works fairly well, I added the above styles and applied them to a paragraph, and sure enough, it came out as I would expect:

<p><strong>Bold text</strong> and 
<strong class="highlighted">highlighted text</strong>.

Interestingly the definition for blockquote in the styles.xml does not mention anything about having a paragraph, but it is included in the output.

You can add and remove the buttons (list of default and optional buttons), but I can’t see a way of editing what the buttons output (although this could be part of the ‘pro’ version).

If the user applies a block level style when only a word is selected, the whole paragraph will be changed. If you use a style intended for images, it removes the text and includes a default image holder.


So long as you are happy working with the drop-down, Xstandard does allow good customisation and locking down of the styles. Personally, I would prefer to have a drop-down for block level HTML elements (headings, blockquotes, paragraphs, pre), buttons for inline elements (bold, italics, images etc.) and a drop-down for adding variations (i.e. styles). Xstandard tends to combine these:

Xstandard's styles drop-down, customised.


Which editor is best for importing and controlling the styles available to authors?

There is no major conclusion to draw here, the editors all act in a fairly similar way. To get the editor to display the styles in WYSIWYG fashion, you need to supply it with a style sheet. In the case of this site at least, you would have to add a specific style sheet for that purpose.

Each allows you to customise what styles are available to the editor, the basic requirement.

Xstandard and FCKeditor have slightly different ways of restricting which styles are applied to what element. For example, if you apply a style intended for images to a paragraph, FCKeditor does not apply the style, whereas Xstandard will remove the text and add an place holder image. TinyMCE lacks this restriction and will add span tags with the class around text.

Although it’s still very close at the moment, Xstandard is looking the best option so far due to the clean code output.

Technorati Tags:

12 contributions to “WYSIWYG editors spec – Importing CSS

  1. Translation of the above post.

    There is always room for improvement: WYSIWYG editors spec – Importing CSS. In this article we will describe, with the help of three current editors (TinyMCE, FCKeditor, Xstandard) how the editors integrate, what problems appear, especially in the area of validation.
    From personal experience, I can only support AlastairC’s evaluation, that everything allows itself to be established , but the so called stumbling block first appears when working on the Detaill: For example in TinyMCE it is possible to define external CSS classes, that don’t apply to all HTML elements. If you are lucky, there is possibly a plug-in for the missing elements.

    Hope this is accurate thank to a mate ( Big_D )living in germany.

  2. I’m a little adicted to notepad i think.

    There is better, and even if i have installed these, i still use notepad..

    If i created an webpage i do first off all the design.
    This is handcoding for me.
    First i make some divs in html-page, and define them in css.

    Then i begin to give the page colors, and images, from here, a good css-editor would be verry handfull.

    Then, if i have defined the backgrounds, cols and formatting of h1-h4…,p, a, li.., i insert al the contents.

    This should go very quickly if it was easy like copy>paste, and select a defined formating out of dropdownmenu (or add formating, wich brings you to css) done…

    But I never found an editor like this…

    Do you know what i mean?

  3. Hi, I use text editors as well, but this series is really talking about editors for people who don’t know or care about code.

    Specifically, those editors that people use on the web to create web content.

    For the type of editor you are after, I would suggest either jEdit (which can auto-finish HTML tags), or a basic WordPress-style editor that allows you to select an area and wrap it in a tags with one click.

  4. Hi Alastair,

    Thanks for your nice article and for the suggestions.

    FCKeditor 2.4 will bring some of the features you are looking for, like the automatic style list filtering depending on the selection (IE only on previous versions) and the possibility to set an id and/or class to the editor body.

    Version 2.5 will be another huge improvement to the styles system. I hope you will all enjoy it.

    Thanks again 😉

  5. Hi Frederico,

    That’s good to hear, I hope the other WYSIWYG articles were useful as well.

    I’ve got one left to do (on enforcing accessibility) and then a check-list of points with a rough scoring mechanism.

    Then I will be trying to configure each of the main editors and running them through the scoring.

  6. The Styles selector in XStandard is for transforming markup from one construct to another. It’s not designed for setting properties on existing markup. Setting properties on existing markup is done via the context menu. See last FAQ in the Did You Know section in our documenatation for instruction on how to align images.

    Alastair, I see that you tried to create a style to center an image. X/HTML has no such construct because images are inline elements. Inline elements can only float left or right.

  7. Great article. I have a question though – is it possible with any of these WYSIWYG editors (specifically TinyMCE) to load the CSS based on what page was being edited?

  8. Hi Davis,

    I think so, you provide the configuration on a page by page basis (although I usually use an include), so you could change the CSS being brought in.

  9. Thanks Alastair,

    Another question: You mentioned using the advanced styles configuration to override the style sheet classes so that you can select a sub-set of classes to include. What I am thinking of doing is only allowing style that are within a certain div to be available. How can I use the advanced styles configuration to make this happen?

    Thanks and your articles on WYSIWYGs are very helpful!

  10. Assuming that the whole editable area is within that div, just include those styles in the config. I haven’t noted any that include functions to sensitively include certain CSS in certain circumstances.

Comments are closed.