Developers can control the CSS stylesheets used to render content in classic editing mode with the stylesheets array. This array should be made up of paths to CSS stylesheets, which are loaded in order from first to last.

The value for this attribute is ignored in inline editing mode. In this mode editor content is part of the host page DOM and is thus rendered using CSS from the surrounding page.

Example

In the example below a configuration is created that specifies 2 custom stylesheets. These sheets are then used to render editor content in classic editing mode.

var configCSS = {
    css : {
        stylesheets : [
           'http://example.com/path/to/styles.css',
           '../relative/path/to/sheet.css'
        ]
    }
};

The following is a representation of the editor document when the configuration above configuration is used.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://example.com/path/to/styles.css">
    <link rel="stylesheet" type="text/css" href="../relative/path/to/sheet.css">
</head>
<body>
      [...]
</body>
</html>