2014-11-07 20:43:57 +01:00
|
|
|
title: WYSIWYG Styles
|
|
|
|
summary: Add custom CSS properties to the rich-text editor.
|
|
|
|
|
|
|
|
# WYSIWYG Styles
|
|
|
|
|
2016-03-30 02:17:28 +02:00
|
|
|
SilverStripe lets you customise the style of content in the CMS. This is done by setting up a CSS file called
|
2014-11-07 20:43:57 +01:00
|
|
|
`editor.css` in either your theme or in your `mysite` folder. This is set through
|
|
|
|
|
2017-08-03 02:51:32 +02:00
|
|
|
|
|
|
|
```php
|
2017-10-26 02:22:02 +02:00
|
|
|
use SilverStripe\Forms\HTMLEditor\HtmlEditorConfig;
|
|
|
|
|
2017-08-07 05:11:17 +02:00
|
|
|
HtmlEditorConfig::get('cms')->setOption('content_css', project() . '/css/editor.css');
|
2017-08-03 02:51:32 +02:00
|
|
|
```
|
2014-11-07 20:43:57 +01:00
|
|
|
|
|
|
|
Will load the `mysite/css/editor.css` file.
|
|
|
|
|
2015-07-14 05:20:15 +02:00
|
|
|
If using this config option in `mysite/_config.php`, you will have to instead call:
|
|
|
|
|
2017-08-03 02:51:32 +02:00
|
|
|
|
|
|
|
```php
|
2017-08-07 05:11:17 +02:00
|
|
|
HtmlEditorConfig::get('cms')->setOption('content_css', project() . '/css/editor.css');
|
2017-08-03 02:51:32 +02:00
|
|
|
```
|
2015-07-14 05:20:15 +02:00
|
|
|
|
2014-11-07 20:43:57 +01:00
|
|
|
Any CSS classes within this file will be automatically added to the `WYSIWYG` editors 'style' dropdown. For instance, to
|
|
|
|
add the color 'red' as an option within the `WYSIWYG` add the following to the `editor.css`
|
|
|
|
|
2017-08-03 02:51:32 +02:00
|
|
|
|
|
|
|
```css
|
|
|
|
|
2017-08-07 05:11:17 +02:00
|
|
|
.red {
|
|
|
|
color: red;
|
|
|
|
}
|
2017-08-03 02:51:32 +02:00
|
|
|
```
|
2014-11-07 20:43:57 +01:00
|
|
|
|
|
|
|
<div class="notice" markdown="1">
|
|
|
|
After you have defined the `editor.css` make sure you clear your SilverStripe cache for it to take effect.
|
|
|
|
</div>
|
|
|
|
|
|
|
|
## API Documentation
|
|
|
|
|
2017-07-03 03:22:12 +02:00
|
|
|
* [HtmlEditorConfig](api:SilverStripe\Forms\HTMLEditor\HtmlEditorConfig)
|