silverstripe-framework/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/05_Typography.md

title: WYSIWYG Styles summary: Add custom CSS properties to the rich-text editor.

WYSIWYG Styles

SilverStripe lets you customise the style of content in the CMS. This is done by setting up a CSS file called editor.css in either your theme or in your mysite folder. This is set through yaml config:

---
name: MyCSS
---
SilverStripe\Forms\HTMLEditor\TinyMCEConfig:
  editor_css:
    - 'mysite/css/editor.css'

Will load the mysite/css/editor.css file.

Custom style dropdown

The custom style dropdown can be enabled via the importcss plugin bundled with admin module. Use the below code in mysite/_config.php:

use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;

TinyMCEConfig::get('cms')
    ->addButtonsToLine(1, 'styleselect')
    ->setOption('importcss_append', true);

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

.red {
    color: red;
}

API Documentation

• HtmlEditorConfig