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

Docs: revamped demo for headings. [skip ci]

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

+ 3 - 3
packages/ckeditor5-alignment/docs/features/text-alignment.md

@@ -14,10 +14,10 @@ The {@link module:alignment/alignment~Alignment} feature enables support for tex
 ## Related features
 
 There are more CKEditor 5 features that can help you organize your content:
-* {@link features/basic-styles Basic font styles} – The essentials, like **bold**, *italic* and others.
-* {@link features/headings Headings} – Divide your content into sections.
+* {@link features/remove-format Remove format} – Easily clean basic text formatting.
+* {@link features/headings Headings} – Split your content into logical sections.
 * {@link features/title Document title} – Clearly divide your content into a title and body.
-* {@link features/indent Block indentation} – Organize your contents into clearly visually divided blocks, indent crucial paragraphs etc.
+* {@link features/indent Block indentation} – Organize your contents into visually separated blocks, indent crucial paragraphs etc.
 * {@link features/block-quote Block quote} – Include block quotations or pull quotes in the rich-text content.
 
 

+ 1 - 5
packages/ckeditor5-basic-styles/docs/features/basic-styles.md

@@ -22,10 +22,6 @@ Check out also these CKEditor 5 features to gain better control over your conten
 * {@link features/text-alignment Text alignment} – Because it does matter whether the content is left, right, centered or justified.
 * {@link features/code-blocks Code block feature}  – Allows for insertion of longer, multiline code listings, expanding the inline code style greatly.
 * {@link features/remove-format Remove format} – Easily clean basic text formatting.
-
-And be sure to get familiar with these, too:
-* {@link features/title Document title} – Clearly divide your content into a title and body.
-* {@link features/headings Headings} – Divide your content into sections.
 * {@link features/highlight Highlight} – Mark important words and passages, aiding a review or drawing attention to specific parts of content.
 
 ## Available text styles
@@ -72,7 +68,7 @@ CKEditor 5 allows for typing both at inner and outer boundaries of code to make
 
 {@img assets/img/typing-after-code.gif 770 The animation showing typing after the code element in CKEditor 5 rich text editor.}
 
-## Installations
+## Installation
 
 To add the basic styles features to your editor install the [`@ckeditor/ckeditor5-basic-styles`](https://www.npmjs.com/package/@ckeditor/ckeditor5-basic-styles) package:
 

+ 12 - 0
packages/ckeditor5-heading/docs/_snippets/features/default-headings.html

@@ -0,0 +1,12 @@
+
+<div id="snippet-default-headings">
+	<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 <Hx> HTML tags where x stands for a number from 1 (the largest and most important) to 6 (the lowest level heading).</p>
+	<h2>The reason to use headings</h2>
+	<p>Headings serve double 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>
+</div>

+ 30 - 0
packages/ckeditor5-heading/docs/_snippets/features/default-headings.js

@@ -0,0 +1,30 @@
+/**
+ * @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, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-default-headings' ), {
+		cloudServices: CS_CONFIG,
+		heading: {
+			options: [
+				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+				{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
+			]
+		},
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 4 - 2
packages/ckeditor5-heading/docs/features/headings.md

@@ -6,7 +6,7 @@ category: features
 
 {@snippet build-classic-source}
 
-The {@link module:heading/heading~Heading} feature enables support for headings.
+The {@link module:heading/heading~Heading} feature enables support for headings. These are used by the creators to structure their documents and aid both the readers amking the reading easier and more organized and the search indexers scanning for crucial information.
 
 <info-box info>
 	This feature is enabled by default in all builds.
@@ -28,7 +28,7 @@ By default, when your editor build does not include the title plugin, a `<h1>` e
 
 ## Demo
 
-{@snippet features/custom-heading-levels}
+{@snippet features/default-headings}
 
 ## Related features
 
@@ -37,6 +37,8 @@ There are more CKEditor 5 features that can help you format your content:
 * {@link features/remove-format Remove format} &ndash; Easily clean basic text formatting.
 * {@link features/title Document title} &ndash; Clearly divide your content into a title and body.
 
+## Configuration
+
 ### Configuring heading levels
 
 It is, of course, possible to configure which heading levels the editor should support and how they should be named in the Headings dropdown. Use the {@link module:heading/heading~HeadingConfig#options `heading.options`} configuration option to do so.

+ 2 - 2
packages/ckeditor5-heading/docs/features/title.md

@@ -18,9 +18,9 @@ Use the editor below to create a document with clearly separated title and body
 ## Related features
 
 There are more CKEditor 5 features that can help you control your document:
-* {@link features/basic-styles Basic font styles} &ndash; The essentials, like **bold**, *italic* and others.
-* {@link features/remove-format Remove format} &ndash; Easily clean basic text formatting.
 * {@link features/headings Headings} &ndash; Divide your content into sections.
+* {@link features/indent Block indentation} &ndash; Organize your contents into visually separated blocks, indent crucial paragraphs etc.
+* {@link features/editor-placeholder Editor placeholder} &ndash; A configurable placeholder text to display when the content is empty. It helps users locate the editor in the application and prompts to input the content.
 
 ## Keyboard navigation
 

+ 1 - 0
packages/ckeditor5-highlight/docs/features/highlight.md

@@ -19,6 +19,7 @@ The highlight plugin always comes with a predefined and limited number of availa
 There are more CKEditor 5 features that can help you style your content:
 * {@link features/basic-styles Basic font styles} &ndash; The essentials, like **bold**, *italic* and others.
 * {@link features/font Font styles} &ndash; Easily and efficiently control the font {@link features/font#configuring-the-font-family-feature family}, {@link features/font#configuring-the-font-size-feature size}, {@link features/font#configuring-the-font-color-and-font-background-color-features text or background color}.
+* {@link features/block-quote Block quote} &ndash; Include block quotations or pull quotes in your rich-text content.
 * {@link features/remove-format Remove format} &ndash; Easily clean basic text formatting.
 
 ## Configuring the highlight options

+ 3 - 3
packages/ckeditor5-list/docs/features/lists.md

@@ -4,7 +4,7 @@ category: features
 
 # Lists
 
-The {@link module:list/list~List list} feature allows creating ordered (numbered) and unordered (bulleted) lists in the editor aimed at better structuring adn presenting specific content as well as serving special purposes, like tables of content or {@link features/todo-lists to-do lists}.
+The {@link module:list/list~List list} feature allows creating ordered (numbered) and unordered (bulleted) lists in the editor aimed at better structuring and presenting specific content such as enumerating elements, creating *tables of content* or {@link features/todo-lists to-do lists}.
 
 <info-box info>
 	The feature is enabled by default in all CKEditor 5 WYSIWYG editor builds.
@@ -37,8 +37,8 @@ Use the editor below to see the list style plugin in action.
 ## Related features
 
 These features also provide similar functionality:
-* {@link features/todo-lists To-do lists} &ndash; This feature lets you create a list of interactive checkboxes with labels.
-* {@link features/indent Block indentation feature} &ndash; Allows you to set indentation for text blocks such as paragraphs or headings and lists.
+* {@link features/todo-lists To-do lists} &ndash; Create a list of interactive checkboxes with labels.
+* {@link features/indent Block indentation feature} &ndash; Set indentation for text blocks such as paragraphs or headings and lists.
 
 ### Installation
 

+ 1 - 0
packages/ckeditor5-remove-format/docs/features/remove-format.md

@@ -20,6 +20,7 @@ Select the content you want to clean up and press the "Remove Format" button in
 
 There are more CKEditor 5 features that can help you format your content:
 * {@link features/basic-styles Basic font styles} &ndash; The essentials, like **bold**, *italic* and others.
+* {@link features/remove-format Remove format} &ndash; Easily clean basic text formatting.
 * {@link features/font Font styles} &ndash; Easily and efficiently control the font {@link features/font#configuring-the-font-family-feature family}, {@link features/font#configuring-the-font-size-feature size}, {@link features/font#configuring-the-font-color-and-font-background-color-features text or background color}.
 
 ## Configuring the remove format feature