Browse Source

Improved the guide.

Piotrek Koszuliński 8 years ago
parent
commit
46b6428da2

+ 2 - 1
packages/ckeditor5-heading/docs/_snippets/features/custom-heading-elements.html

@@ -1,6 +1,7 @@
 <style>
-	.fancy {
+	h2.fancy, .ck-heading_heading2_fancy {
 		color: #ff0050;
+		font-size: 1.3em;
 	}
 </style>
 

+ 2 - 2
packages/ckeditor5-heading/docs/_snippets/features/custom-heading-elements.js

@@ -13,13 +13,13 @@ ClassicEditor
 				{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
 				{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
 				{
-					model: 'heading2fancy',
+					model: 'headingFancy',
 					view: {
 						name: 'h2',
 						class: 'fancy',
 						priority: 'high'
 					},
-					title: 'Heading 2 (fancy)', class: 'ck-heading_heading2 fancy'
+					title: 'Heading 2 (fancy)', class: 'ck-heading_heading2_fancy'
 				}
 			]
 		},

+ 9 - 6
packages/ckeditor5-heading/docs/features/headings.md

@@ -53,14 +53,16 @@ ClassicEditor
 
 ### Configuring custom heading elements
 
-It is also possible to define custom elements for headings using {@link module:engine/view/viewelementdefinition~ViewElementDefinition}.
+It is also possible to define fully custom elements for headings by using the {@link module:engine/view/viewelementdefinition~ViewElementDefinition advanced format} of the {@link module:heading/heading~HeadingConfig#options `heading.options`} configuration option.
 
-For example, the following editor will support `heading2fancy` that differs from `heading2` in view by extra `class` property: 
+For example, the following editor will support the following two heading options at the same time: `<h2 class="fancy">` and `<h2>`:
 
 ```html
 <style>
-	.fancy {
+	// Style for the heading in the content and for the dropdown item.
+	h2.fancy, .ck-heading_heading2_fancy {
 		color: #ff0050;
+		font-size: 1.3em;
 	}
 </style>
 
@@ -70,7 +72,6 @@ For example, the following editor will support `heading2fancy` that differs from
 	<h2 class="fancy">Fancy Heading 2</h2>
 	<p>This is <a href="https://ckeditor5.github.io">CKEditor 5</a>.</p>
 </div>
-
 ```
 
 ```js
@@ -82,14 +83,16 @@ ClassicEditor
 				{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
 				{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
 				{
-					model: 'heading2fancy',
+					model: 'headingFancy',
 					view: {
 						name: 'h2',
 						class: 'fancy',
+
+						// It needs to be converted before the standard 'heading2'.
 						priority: 'high'
 					},
 					title: 'Heading 2 (fancy)',
-					class: 'ck-heading_heading2 fancy'
+					class: 'ck-heading_heading2_fancy'
 				}
 			]
 		}