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

Merge pull request #7757 from open-sausages/pulls/4.0/update-editorcss-docs

Browse Source 
DOCS Update editor.css usage docs
This commit is contained in:
Robbie Averill 2018-01-16 14:34:10 +13:00 committed by GitHub
commit fc0e0442c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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
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 `
}
```
<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
* [HtmlEditorConfig](api:SilverStripe\Forms\HTMLEditor\HtmlEditorConfig)