浏览代码

Docs: header buttons; this code does work. [skip ci]

godai78 5 年之前
父节点
当前提交
417bd7c273

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

@@ -1,7 +1,11 @@
-<div id="editor">
-	<h2>Heading 1</h2>
-	<p>Ye, ye, ye.</p>
-	<h3>Heading 2</h3>
-	<h4>Heading 3</h4>
-	<p>Paragraph</p>
-</div>
+<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>
+</div>

+ 4 - 15
packages/ckeditor5-heading/docs/_snippets/features/heading-buttons.js

@@ -2,24 +2,13 @@
  * @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 console, document, window */
-
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-
+/* globals ClassicEditor, console, document, window */
 ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Undo, Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ],
-		toolbar: [ 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6' ],
+	.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' },

+ 0 - 0
packages/ckeditor5-heading/docs/_snippets/features/heading-source.html


+ 13 - 0
packages/ckeditor5-heading/docs/_snippets/features/heading-source.js

@@ -0,0 +1,13 @@
+/**
+ * @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 window */
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui';
+import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui';
+ClassicEditor.builtinPlugins.push(
+	HeadingButtonsUI,
+	ParagraphButtonUI
+);
+window.ClassicEditor = ClassicEditor;

+ 1 - 1
packages/ckeditor5-heading/docs/features/headings.md

@@ -4,7 +4,7 @@ category: features
 
 # Headings
 
-{@snippet build-classic-source}
+{@snippet features/heading-source}
 
 The {@link module:heading/heading~Heading} feature enables support for headings. These are used by the creators to structure their documents. They also aid both the readers, making the content more organized and easier to read, and the search indexers scanning for crucial information.