From 0ca152c156117b07614e2ffd5dbee699e0cc7136 Mon Sep 17 00:00:00 2001
From: Martin Portevin <DrMartinGonzo@users.noreply.github.com>
Date: Wed, 17 Jan 2018 18:27:28 +0100
Subject: [PATCH] Added style_formats example

---
 .../05_Typography.md                          | 63 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 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 fe8ed3385..a9460f6bd 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
@@ -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