tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-06-29 07:59:31 +02:00
Code Issues Projects Releases Wiki Activity

Added style_formats example

Browse Source
This commit is contained in:
Martin Portevin 2018-01-17 18:27:28 +01:00 committed by GitHub
parent 7a0d432ece
commit 0ca152c156
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ 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.
The custom style dropdown can be enabled via the `importcss` plugin bundled with admin module. ([Doc](https://www.tinymce.com/docs/plugins/importcss/))
Use the below code in `mysite/_config.php`:
```php
@ -30,7 +30,8 @@ TinyMCEConfig::get('cms')
->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
add the color 'red' as an option within the `WYSIWYG` add the following to the `editor.css`
@ -39,6 +40,64 @@ add the color 'red' as an option within the `WYSIWYG` add the following to the `
color: red;
}
```
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,
]);
```
## API Documentation