8
0
Просмотр исходного кода

Docs: heading buttons in toolbar; full set.

godai78 5 лет назад
Родитель
Сommit
9558b90c6d

+ 5 - 0
packages/ckeditor5-heading/docs/_snippets/features/custom-heading-buttons.html

@@ -0,0 +1,5 @@
+<div id="snippet-custom-heading-buttons">
+	<h1>Heading 1</h1>
+	<h2>Heading 2</h2>
+	<p>This is <a href="https://ckeditor.com">CKEditor 5</a>.</p>
+</div>

+ 26 - 0
packages/ckeditor5-heading/docs/_snippets/features/custom-heading-buttons.js

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/* globals ClassicEditor, console, document, window */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-heading-buttons' ), {
+		toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', '|', 'undo', 'redo' ],
+		heading: {
+			options: [
+				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+				{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' },
+				{ model: 'heading4', view: 'h5', title: 'Heading 4', class: 'ck-heading_heading4' },
+				{ model: 'heading5', view: 'h6', title: 'Heading 5', class: 'ck-heading_heading5' },
+				{ model: 'heading6', view: 'p', title: 'Heading 6', class: 'ck-heading_heading6' }
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 7 - 9
packages/ckeditor5-heading/docs/_snippets/features/heading-buttons.html

@@ -1,11 +1,9 @@
 <div id="snippet-heading-buttons">
-	<h1>On the importance of headings</h1>
-	<h2>What is a heading?</h2>
-	<p>A heading should be viewed as a title or a subtitle displayed in the document or a webpage. These are created with the &lt;h1&gt; to &lt;h6&gt; HTML tags where  1 is the largest (and most important) while 6 is the lowest level heading.</p>
-	<h2>The reason to use headings</h2>
-	<p>Headings serve dual purpose in the documents: they help the creators and readers interact with the content and they also affect the way search engines index the webpage.</p>
-	<h3>Human interaction</h3>
-	<p>Having a clearly defined structure with sections and subsections is beneficial for both the creator, who can convey their message better as well as for the readers, who can access the content with ease. Having a few good headings aids scanning and searching for specific information in the document as well as structuring the data contained.</p>
-	<h3>Search engine indexing algorithms</h3>
-	<p>Search engines use the headings to index the structure of the document and point to important keywords.</p>
+	<h1>The overall user experience</h1>
+	<h2>Usability</h2>
+	<p>There are certain situations, both user-oriented or independent, in which different solutions work better. Splitting the heading dropdown into separate buttons does certainly speed up the access, while at the same time taking up more space. It is up to the user to decide, whether easier accessability prevails over tidy toolbar.</p>
+	<h2>Personal preference</h2>
+	<p>Usability and editing needs might be one of the factors, but still there is the personal preference - the user's previous experience and habits might come forth and be a decisive factor.</p>
+	<h2>Flexibility</h2>
+	<p>Whatever the reason may be to use both the standard heading dropdown list or the separate heading toolbar buttons, <a href="https://ckeditor.com">CKEditor 5</a> WYSIWYG editor offers both of these options for greater comfort of rich-text edition and user satisfaction.</p>
 </div>

+ 43 - 0
packages/ckeditor5-heading/docs/features/headings.md

@@ -30,6 +30,10 @@ By default, when your editor build does not include the title plugin, a `<h1>` e
 
 {@snippet features/default-headings}
 
+## Heading buttons
+
+The heading feature lets you also use a set of heading buttons instead of the dropdown list. The toolbar buttons are configurable and it is possible to include a paragraph button, too. Compare the heading toolbar dropdown from above demo with the heading buttons below to check the functionality and usability of this variation.
+
 {@snippet features/heading-buttons}
 
 ## Related features
@@ -126,6 +130,36 @@ ClassicEditor
 
 {@snippet features/custom-heading-elements}
 
+### Configuring toolbar buttons
+
+In order to use toolbar buttons instead of heading dropdown, you need to properly configure the feature. You also need to import proper UI elements; see the [installation section](#installation-with-toolbar-heading-buttons) for instructions on how to do it.
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#snippet-heading-buttons' ), {
+		toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', '|', 'undo', 'redo' ],
+		heading: {
+			options: [
+				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+				{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' },
+				{ model: 'heading4', view: 'h5', title: 'Heading 4', class: 'ck-heading_heading4' },
+				{ model: 'heading5', view: 'h6', title: 'Heading 5', class: 'ck-heading_heading5' },
+				{ model: 'heading6', view: 'p', title: 'Heading 6', class: 'ck-heading_heading6' }
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+```
+{@snippet features/custom-heading-buttons}
+
+
 ## Installation
 
 <info-box info>
@@ -152,6 +186,15 @@ ClassicEditor
 	.catch( ... );
 ```
 
+### Installation with toolbar heading buttons
+
+In order to be able to configure the toolbar buttons for headings and paragraph, you need to import the following into your plugin list and configuration:
+
+```js
+import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
+import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';
+```
+
 <info-box info>
 	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
 </info-box>