From 971a1f07031b762ea87cd83d9f726a0bbba3bafe Mon Sep 17 00:00:00 2001 From: Damian Mooyman Date: Tue, 16 Jan 2018 12:36:00 +1300 Subject: [PATCH] DOCS Update editor.css usage docs --- .../05_Typography.md | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/05_Typography.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/05_Typography.md index cc52dfebb..fe8ed3385 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/05_Typography.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/05_Typography.md @@ -4,22 +4,30 @@ 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 +`editor.css` in either your theme or in your `mysite` folder. This is set through yaml config: - -```php -use SilverStripe\Forms\HTMLEditor\HtmlEditorConfig; - -HtmlEditorConfig::get('cms')->setOption('content_css', project() . '/css/editor.css'); +```yaml +--- +name: MyCSS +--- +SilverStripe\Forms\HTMLEditor\TinyMCEConfig: + editor_css: + - 'mysite/css/editor.css' ``` Will load the `mysite/css/editor.css` file. -If using this config option in `mysite/_config.php`, you will have to instead call: +## 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`: ```php -HtmlEditorConfig::get('cms')->setOption('content_css', project() . '/css/editor.css'); +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 @@ -32,10 +40,6 @@ add the color 'red' as an option within the `WYSIWYG` add the following to the ` } ``` -
-After you have defined the `editor.css` make sure you clear your SilverStripe cache for it to take effect. -
- ## API Documentation * [HtmlEditorConfig](api:SilverStripe\Forms\HTMLEditor\HtmlEditorConfig)