Преглед на файлове

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

godai78 преди 5 години
родител
ревизия
4bb9432c39

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * @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';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Enter, Typing, Undo, Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ],
+		toolbar: [ 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6' ],
+		heading: {
+			options: [
+				{ 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 );
+	} );

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

@@ -30,6 +30,8 @@ By default, when your editor build does not include the title plugin, a `<h1>` e
 
 {@snippet features/default-headings}
 
+{@snippet features/heading-buttons}
+
 ## Related features
 
 There are more CKEditor 5 features that can help you format your content: