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
|
2018-01-16 00:36:00 +01:00
|
|
|
`editor.css` in either your theme or in your `mysite` folder. This is set through yaml config:
|
|
|
|
|
|
|
|
```yaml
|
|
|
|
---
|
|
|
|
name: MyCSS
|
|
|
|
---
|
|
|
|
SilverStripe\Forms\HTMLEditor\TinyMCEConfig:
|
|
|
|
editor_css:
|
|
|
|
- 'mysite/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.
|
|
|
|
|
2018-01-16 00:36:00 +01:00
|
|
|
## Custom style dropdown
|
2015-07-14 05:20:15 +02:00
|
|
|
|
2018-01-16 00:36:00 +01:00
|
|
|
The custom style dropdown can be enabled via the `importcss` plugin bundled with admin module.
|
|
|
|
Use the below code in `mysite/_config.php`:
|
2017-08-03 02:51:32 +02:00
|
|
|
|
|
|
|
```php
|
2018-01-16 00:36:00 +01:00
|
|
|
use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;
|
|
|
|
|
|
|
|
TinyMCEConfig::get('cms')
|
|
|
|
->addButtonsToLine(1, 'styleselect')
|
|
|
|
->setOption('importcss_append', true);
|
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-10-27 04:38:27 +02:00
|
|
|
.red {
|
|
|
|
color: red;
|
|
|
|
}
|
2017-08-03 02:51:32 +02:00
|
|
|
```
|
2014-11-07 20:43:57 +01:00
|
|
|
|
|
|
|
## API Documentation
|
|
|
|
|
2017-07-03 03:22:12 +02:00
|
|
|
* [HtmlEditorConfig](api:SilverStripe\Forms\HTMLEditor\HtmlEditorConfig)
|