瀏覽代碼

Tests: Added an editor where images have extra padding.

The purpose of it is to make sure that the resize wrapper/border aligns to around the resize host and not the entire widget.
Marek Lewandowski 6 年之前
父節點
當前提交
d6442593b8
共有 2 個文件被更改,包括 76 次插入20 次删除
  1. 51 13
      packages/ckeditor5-image/tests/manual/resize.html
  2. 25 7
      packages/ckeditor5-image/tests/manual/resize.js

+ 51 - 13
packages/ckeditor5-image/tests/manual/resize.html

@@ -15,15 +15,35 @@
 
 	<h2>Visible resizers</h2>
 	<ol>
-		<li><input type="checkbox" name="handler[]" value="top-left" id="resizer-checkbox__top-left"> <label for="resizer-checkbox__top-left">top-left</label></li>
-		<li><input type="checkbox" name="handler[]" value="top-right" id="resizer-checkbox__top-right"> <label for="resizer-checkbox__top-right">top-right</label></li>
-		<li><input type="checkbox" name="handler[]" value="bottom-right" id="resizer-checkbox__bottom-right"> <label for="resizer-checkbox__bottom-right">bottom-right</label></li>
-		<li><input type="checkbox" name="handler[]" value="bottom-left" id="resizer-checkbox__bottom-left"> <label for="resizer-checkbox__bottom-left">bottom-left</label></li>
+		<li><input type="checkbox" name="handler[]" value="top-left" id="resizer-checkbox__top-left"> <label
+				for="resizer-checkbox__top-left">top-left</label></li>
+		<li><input type="checkbox" name="handler[]" value="top-right" id="resizer-checkbox__top-right"> <label
+				for="resizer-checkbox__top-right">top-right</label></li>
+		<li><input type="checkbox" name="handler[]" value="bottom-right" id="resizer-checkbox__bottom-right"> <label
+				for="resizer-checkbox__bottom-right">bottom-right</label></li>
+		<li><input type="checkbox" name="handler[]" value="bottom-left" id="resizer-checkbox__bottom-left"> <label
+				for="resizer-checkbox__bottom-left">bottom-left</label></li>
 	</ol>
 
-	<p><input type="checkbox" name="resize-image" value="true" id="resize-image" checked> <label for="resize-image">Resize using image directly</label></p>
+	<p><input type="checkbox" name="resize-image" value="true" id="resize-image" checked> <label
+			for="resize-image">Resize using image directly</label></p>
 </section>
 
+<style>
+	.ck-content .image-style-side,
+	.ck-content .image-style-align-left,
+	.ck-content .image-style-align-center,
+	.ck-content .image-style-align-right {
+		max-width: 100%;
+	}
+
+	.fancyEditorWrapper figure
+	{
+		padding: 20px;
+	}
+
+</style>
+
 <div id="editor">
 
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
@@ -39,13 +59,31 @@
 	<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 class="fancyEditorWrapper">
+	<h2>Fancy editor</h2>
+
+	<p>This is editor with fancier image styling. Images have some internal padding.</p>
+
+	<div id="fancyEditor">
+
+		<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-side">
+			<img src="sample.jpg" alt="" height="60" />
+		</figure>
+		<figure class="image">
+			<img src="sample.jpg" alt="" />
+		</figure>
 
-	<style>
-		.ck-content .image-style-side,
-		.ck-content .image-style-align-left,
-		.ck-content .image-style-align-center,
-		.ck-content .image-style-align-right {
-			max-width: 100%;
-		}
-	</style>
+		<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>

+ 25 - 7
packages/ckeditor5-image/tests/manual/resize.js

@@ -12,20 +12,29 @@ import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImagePlugin from '../../src/image';
 import ImageStyle from '../../src/imagestyle';
 import ImageToolbar from '../../src/imagetoolbar';
+import ImageCaption from '../../src/imagecaption';
 import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
 import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
 import ResizerCentral from '@ckeditor/ckeditor5-widget/src/resizercentral';
 import ResizerSide from '@ckeditor/ckeditor5-widget/src/resizerside';
 
+const commonConfig = {
+	plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, ImagePlugin, ImageStyle, ImageToolbar, ImageCaption,
+		UndoPlugin, ClipboardPlugin ],
+	toolbar: [ 'undo', 'redo' ],
+	image: {
+		toolbar: [ 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:side' ],
+		styles: [
+			'full',
+			'alignLeft',
+			'side' // Purposely using side image instead right aligned image to make sure it works well with both style types.
+		]
+	}
+};
+
 ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, ImagePlugin, ImageStyle, ImageToolbar, UndoPlugin, ClipboardPlugin ],
-		toolbar: [ 'undo', 'redo' ],
-		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
-		}
-	} )
+	.create( document.querySelector( '#editor' ), commonConfig )
 	.then( editor => {
 		window.editor = editor;
 	} )
@@ -33,6 +42,15 @@ ClassicEditor
 		console.error( err.stack );
 	} );
 
+ClassicEditor
+	.create( document.querySelector( '#fancyEditor' ), commonConfig )
+	.then( editor => {
+		window.fancyEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
 ( function() {
 	const optionsWrapper = document.getElementById( 'resizer-options' );
 	const defaultConfig = {