Recommended Configuration for htmlArea

By: Lucas Thurston

When specifying a stylesheet for the RTE, it is probably best to include the main typography stylesheet rather than a separate stylesheet only for htmlArea. Sometimes doing so however, has interesting consequences, and you may want to move the RTE-specific to their own file. In the second line of the RTE config above, we choose the file we want to include:

RTE.default.contentCSS = fileadmin/templates/htmlarea.css

Right after that we must choose the classes that will be included in the drop-down character class selector. It’s defined by “classesCharacter” because you can wrap individual, in-line, segments (aka characters) of a paragraph or header. To set styles on paragraphs, use the “classesParagraph” property.

RTE.default.classesCharacter = fancy,neato,ugly

And, we must define those styles in our stylesheet:

.fancy {
    ...
}
.neato {
    ...
}
.ugly {
    ...
}

Make sure to include “textstylelabel” in your showButtons list, or the RTE user won’t even have the drop-down box to select a style from!