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

Internal: Moved CSS into a dedicated file. Moved width attribute to figure in manual tests.

Marek Lewandowski 6 лет назад
Родитель
Сommit
0e1324a480

+ 2 - 0
packages/ckeditor5-image/src/imageresize.js

@@ -11,6 +11,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
 import ImageResizeCommand from './imageresize/imageresizecommand';
 
+import '../theme/imageresize.css';
+
 /**
  *	Image resize plugin.
  *

+ 4 - 4
packages/ckeditor5-image/tests/manual/imageresize.html

@@ -6,8 +6,8 @@
 </style>
 
 <div id="editor">
-	<figure class="image image-style-side">
-		<img src="sample.jpg" alt="" style="width: 240px" />
+	<figure class="image image-style-side" style="width: 240px">
+		<img src="sample.jpg" alt="" />
 	</figure>
 
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
@@ -36,8 +36,8 @@
 	<p>This is editor with fancier image styling. Images have some internal padding.</p>
 
 	<div id="fancyEditor">
-		<figure class="image image-style-side">
-			<img src="sample.jpg" alt="" style="width: 240px" />
+		<figure class="image image-style-side" style="width: 240px">
+			<img src="sample.jpg" alt="" />
 		</figure>
 
 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id

+ 25 - 0
packages/ckeditor5-image/theme/imageresize.css

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-content .image.image_resized {
+	max-width: 100%;
+	/*
+	The figure element for resized images must not use `display:table` as browsers doesn't support `max-width` for it well.
+	See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
+	Fortunately, since we control width, there's no risk that the image will look bad.
+	*/
+	display: block;
+	box-sizing: border-box;
+
+	& img {
+		/* For resized images it's the figure that determines the image's width. */
+		width: 100%;
+	}
+
+	&>figcaption {
+		/* Figure uses display block, so figcaption also has to. */
+		display: block;
+	}
+}

+ 0 - 21
packages/ckeditor5-image/theme/imagestyle.css

@@ -17,27 +17,6 @@
 		}
 	}
 
-	& .image.image_resized {
-		max-width: 100%;
-		/*
-		The figure element for resized images must not use `display:table` as browsers doesn't support `max-width` for it well.
-		See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
-		Fortunately, since we control width, there's no risk that the image will look bad.
-		*/
-		display: block;
-		box-sizing: border-box;
-
-		& img {
-			/* For resized images it's the figure that determines the image's width. */
-			width: 100%;
-		}
-
-		& > figcaption {
-			/* Figure uses display block, so figcaption also has to. */
-			display: block;
-		}
-	}
-
 	& .image-style-side {
 		float: right;
 		margin-left: var(--ck-image-style-spacing);