tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

DOCS Update editor.css usage docs

Browse Source
This commit is contained in:
Damian Mooyman 2018-01-16 12:36:00 +13:00
parent f3d00f1b4b
commit 971a1f0703
No known key found for this signature in database
GPG Key ID: 78B823A10DE27D1A
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/05_Typography.md
View File

@ -4,22 +4,30 @@ summary: Add custom CSS properties to the rich-text editor.
# WYSIWYG Styles # WYSIWYG Styles
SilverStripe lets you customise the style of content in the CMS. This is done by setting up a CSS file called 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:
```yaml
```php ---
use SilverStripe\Forms\HTMLEditor\HtmlEditorConfig; name: MyCSS
---
HtmlEditorConfig::get('cms')->setOption('content_css', project() . '/css/editor.css'); SilverStripe\Forms\HTMLEditor\TinyMCEConfig:
editor_css:
- 'mysite/css/editor.css'
``` ```
Will load the `mysite/css/editor.css` file. 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 ```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 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 `
} }
``` ```
<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 ## API Documentation
* [HtmlEditorConfig](api:SilverStripe\Forms\HTMLEditor\HtmlEditorConfig) * [HtmlEditorConfig](api:SilverStripe\Forms\HTMLEditor\HtmlEditorConfig)