Jelajahi Sumber

Added manual test checking heading buttons.

Szymon Kupś 7 tahun lalu
induk
melakukan
c7a2102b84

+ 18 - 0
packages/ckeditor5-heading/src/headingbuttonsui.js

@@ -24,6 +24,24 @@ const defaultIcons = {
  * It is not enabled by default when using {@link module:heading/heading~Heading heading plugin}, and needs to be
  * added manually to the editor configuration.
  *
+ * Plugin introduces button UI elements, which names are same as `model` property from {@link module:heading/heading~HeadingOption}.
+ *
+ *		ClassicEditor
+ *			.create( {
+ *				plugins: [ ..., Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ]
+ *				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' }
+ *					]
+ * 				},
+ * 				toolbar: []
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
  * It is possible to use custom icons by providing `icon` config option provided in {@link module:heading/heading~HeadingOption}.
  * For the default configuration standard icons are used.
  *

+ 6 - 0
packages/ckeditor5-heading/tests/manual/heading-buttons.html

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

+ 27 - 0
packages/ckeditor5-heading/tests/manual/heading-buttons.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* 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 '../../src/heading';
+import HeadingButtonsUI from '../../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: [ 'paragraph', 'heading1', 'heading2', 'heading3', '|', 'undo', 'redo' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 5 - 0
packages/ckeditor5-heading/tests/manual/heading-buttons.md

@@ -0,0 +1,5 @@
+## Headings button UI feature
+
+1. The data should be loaded with three headings and one paragraph.
+2. Put selection inside each block and check if correct button is selected.
+3. Switch headings using buttons.

+ 2 - 3
packages/ckeditor5-heading/tests/manual/heading.js

@@ -9,14 +9,13 @@ 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 '../../src/heading';
-import HeadingButtonsUI from '../../src/headingbuttonsui';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Undo, Heading, Paragraph, HeadingButtonsUI ],
-		toolbar: [ 'heading', '|', 'undo', 'redo', '|', 'heading1', 'heading2', 'heading3' ]
+		plugins: [ Enter, Typing, Undo, Heading, Paragraph ],
+		toolbar: [ 'heading', '|', 'undo', 'redo', ]
 	} )
 	.then( editor => {
 		window.editor = editor;