Skin and theme configuration
config.skin picks how the editor chrome looks. The value is added to the editor container as a class: skin: "dark" gives the container rte-skin-dark, and the theme stylesheet styles it from there.
var config = {};
config.skin = "dark"; // "" (default look), "dark", "gray", "blue", "rounded-corner"
var editor = new RichTextEditor("#div_editor", config);Skins in the default theme
| Value | Look |
|---|---|
(not set) | The default light chrome, with square corners. |
dark | Dark toolbar and chrome, for a dark application shell. |
gray | Muted grey toolbar; less contrast against a white page. |
blue | Blue toolbar accent. |
rounded-corner | The default colours with rounded corners on the editor frame. |
Your own skin
The editor does not validate the value, so any name works as long as you style the matching class yourself:
/* Your own skin: any class name works, the editor just prefixes it. */
.rte-skin-brand .rte-toolbar { background: #101828; }
.rte-skin-brand .rte-toolbar button { color: #e6eefc; }For changing the editing surface rather than the chrome, see contentCssUrl and setContentCssText. Square corners without a full skin are available through the rte-square modifier.