Developers can directly use CSS to render content in classic editing mode with documentStyles. This configuration property accepts a string of CSS, which is added to a classic editing mode editor document immediately following any stylesheets added with stylesheets.
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 inline document CSS along with 2 custom stylesheets. Note that CSS added with documentStyles is loaded after any stylesheets added with stylesheets.
var configCSS = {
css : {
documentStyles : 'body { background:red; }',
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">
<style type="text/css">
body {
background: red;
}
</style>
</head>
<body>
[...]
</body>
</html>