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

Tests: Updated the image style manual test with formatting styles.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
b5addfc264

+ 2 - 1
packages/ckeditor5-image/tests/manual/caption.js

@@ -28,7 +28,8 @@ ClassicEditor
 		],
 		],
 		toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ],
 		toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ],
 		image: {
 		image: {
-			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+			styles: [ 'imageStyleFull', 'imageStyleAlignCenter' ],
+			toolbar: [ 'imageStyleFull', 'imageStyleAlignCenter', '|', 'imageTextAlternative' ]
 		}
 		}
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {

+ 11 - 1
packages/ckeditor5-image/tests/manual/imagestyle.html

@@ -1,10 +1,20 @@
-<div id="editor">
+<h2>Semantic–oriented images</h2>
+
+<div id="editor-semantic">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image">
 	<figure class="image">
 		<img src="sample.jpg" alt="" />
 		<img src="sample.jpg" alt="" />
 	</figure>
 	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+</div>
+
+<h2>Formatting–oriented images</h2>
+<div id="editor-formatting">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<figure class="image image-style-align-center">
+		<img src="sample.jpg" alt="" />
+	</figure>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 </div>
 </div>

+ 28 - 2
packages/ckeditor5-image/tests/manual/imagestyle.js

@@ -17,7 +17,7 @@ import ImageStyle from '../../src/imagestyle';
 import ImageToolbar from '../../src/imagetoolbar';
 import ImageToolbar from '../../src/imagetoolbar';
 
 
 ClassicEditor
 ClassicEditor
-	.create( document.querySelector( '#editor' ), {
+	.create( document.querySelector( '#editor-semantic' ), {
 		plugins: [
 		plugins: [
 			ImageToolbar,
 			ImageToolbar,
 			EnterPlugin,
 			EnterPlugin,
@@ -35,7 +35,33 @@ ClassicEditor
 		}
 		}
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
-		window.editor = editor;
+		window.editorSemantic = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-formatting' ), {
+		plugins: [
+			ImageToolbar,
+			EnterPlugin,
+			TypingPlugin,
+			ParagraphPlugin,
+			HeadingPlugin,
+			ImagePlugin,
+			UndoPlugin,
+			ClipboardPlugin,
+			ImageStyle
+		],
+		toolbar: [ 'headings', 'undo', 'redo' ],
+		image: {
+			styles: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ],
+			toolbar: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ]
+		}
+	} )
+	.then( editor => {
+		window.editorFormatting = editor;
 	} )
 	} )
 	.catch( err => {
 	.catch( err => {
 		console.error( err.stack );
 		console.error( err.stack );

+ 7 - 0
packages/ckeditor5-image/tests/manual/imagestyle.md

@@ -1,6 +1,13 @@
 ## ImageStyle feature
 ## ImageStyle feature
 
 
+### The "semantic–oriented" editor
+
 * Click on image - toolbar with icons should appear. "Full size image" icon should be selected.
 * Click on image - toolbar with icons should appear. "Full size image" icon should be selected.
 * Click on "Side image" icon. Image should be aligned to right.
 * Click on "Side image" icon. Image should be aligned to right.
 * Click on "Full size image" icon. Image should be back to its original state.
 * Click on "Full size image" icon. Image should be back to its original state.
 * Resize the browser window so the scrollbar is visible. Click on image and scroll editor contents - check if toolbar is placed in proper position.
 * Resize the browser window so the scrollbar is visible. Click on image and scroll editor contents - check if toolbar is placed in proper position.
+
+### The "formatting–oriented" editor
+
+* Click on image - toolbar with icons should appear. "Centered image" icon should be selected.
+* Check if other icons icons change the alignment of the image.