2019-11-18 05:58:33 +01:00
---
2014-11-07 20:43:57 +01:00
title: WYSIWYG Styles
summary: Add custom CSS properties to the rich-text editor.
2019-11-18 05:58:33 +01:00
icon: text-width
---
2014-11-07 20:43:57 +01:00
# 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-06-25 00:39:53 +02:00
`editor.css` in either your theme or in your `app/` folder. This is set through yaml config:
2018-01-16 00:36:00 +01:00
```yaml
---
name: MyCSS
---
SilverStripe\Forms\HTMLEditor\TinyMCEConfig:
editor_css:
2018-06-25 00:39:53 +02:00
- 'app/css/editor.css'
2017-08-03 02:51:32 +02:00
```
2014-11-07 20:43:57 +01:00
2018-06-25 00:39:53 +02:00
Will load the `app/css/editor.css` file.
2014-11-07 20:43:57 +01:00
2018-03-05 04:06:51 +01:00
Alternatively, you can set this on a specific `TinyMCEConfig` instance via `setContentCSS` method.
```php
$config = new TinyMCEConfig();
2018-06-25 00:39:53 +02:00
$config->setContentCSS([ '/app/client/css/editor.css' ]);
2018-03-05 04:06:51 +01:00
```
2018-01-16 00:36:00 +01:00
## Custom style dropdown
2015-07-14 05:20:15 +02:00
2018-01-17 18:27:28 +01:00
The custom style dropdown can be enabled via the `importcss` plugin bundled with admin module. ([Doc](https://www.tinymce.com/docs/plugins/importcss/))
2018-06-25 00:39:53 +02:00
Use the below code in `app/_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
2018-01-17 18:27:28 +01:00
Any CSS classes within this file will be automatically added to the `WYSIWYG` editors 'style' dropdown.
For instance, to
2014-11-07 20:43:57 +01:00
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
```
2018-01-17 18:27:28 +01:00
Adding a tag to the selector will automatically wrap with this tag. For example :
```css
h4.red {
color: red;
}
```
will add an `h4` tag to the selected block.
For further customisation, customize the `style_formats` option.
`style_formats` won't be applied if you do not enable `importcss_append` .
Here is a working example to get you started.
See related [tinymce doc ](https://www.tinymce.com/docs/configure/content-formatting/#style_formats ).
```php
use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;
$formats = [
[ 'title' => 'Headings', 'items' => [
['title' => 'Heading 1', 'block' => 'h1' ],
['title' => 'Heading 2', 'block' => 'h2' ],
['title' => 'Heading 3', 'block' => 'h3' ],
['title' => 'Heading 4', 'block' => 'h4' ],
['title' => 'Heading 5', 'block' => 'h5' ],
['title' => 'Heading 6', 'block' => 'h6' ],
[
'title' => 'Subtitle',
'selector' => 'p',
'classes' => 'title-sub',
],
]
],
[
'title' => 'Misc Styles', 'items' => [
[
'title' => 'Style 1',
'selector' => 'ul',
'classes' => 'style1',
'wrapper' => true,
'merge_siblings' => false,
],
[
'title' => 'Button red',
'inline' => 'span',
'classes' => 'btn-red',
'merge_siblings' => true,
],
]
],
];
TinyMCEConfig::get('cms')
->addButtonsToLine(1, 'styleselect')
->setOptions([
'importcss_append' => true,
'style_formats' => $formats,
]);
```
2014-11-07 20:43:57 +01:00
## API Documentation
2017-07-03 03:22:12 +02:00
* [HtmlEditorConfig ](api:SilverStripe\Forms\HTMLEditor\HtmlEditorConfig )