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

Changed the way responsive images are stored in the model, according to changes in ckeditor5-image.

Szymon Kupś преди 8 години
родител
ревизия
b9af92062f

+ 6 - 1
packages/ckeditor5-upload/src/filerepository.js

@@ -507,9 +507,14 @@ mix( FileLoader, ObservableMixin );
  *			default: 'http://server/default-size.image.png',
  *			'160': 'http://server/size-160.image.png',
  *			'500': 'http://server/size-500.image.png',
- *			'1000': 'http://server/size-1000.image.png'
+ *			'1000': 'http://server/size-1000.image.png',
+ *			'1052': 'http://server/default-size.image.png'
  *		}
  *
+ * NOTE: When returning multiple images, the widest returned one should equal the default one. It is essential to
+ * correctly set `width` attribute of the image. See this discussion:
+ * https://github.com/ckeditor/ckeditor5-easy-image/issues/4 for more information.
+ *
  * Take a look at {@link module:upload/filerepository~Adapter example Adapter implementation} and
  * {@link module:upload/filerepository~FileRepository#createAdapter createAdapter method}.
  *

+ 14 - 2
packages/ckeditor5-upload/src/imageuploadengine.js

@@ -138,9 +138,18 @@ export default class ImageUploadEngine extends Plugin {
 					doc.batch( 'transparent' ).setAttribute( imageElement, 'src', data.default );
 
 					// Srcset attribute for responsive images support.
+					let maxWidth = 0;
 					const srcsetAttribute = Object.keys( data )
 						// Filter out keys that are not integers.
-						.filter( key => !isNaN( parseInt( key, 10 ) ) )
+						.filter( key => {
+							const width = parseInt( key, 10 );
+
+							if ( !isNaN( width ) ) {
+								maxWidth = Math.max( maxWidth, width );
+
+								return true;
+							}
+						} )
 
 						// Convert each key to srcset entry.
 						.map( key => `${ data[ key ] } ${ key }w` )
@@ -149,7 +158,10 @@ export default class ImageUploadEngine extends Plugin {
 						.join( ', ' );
 
 					if ( srcsetAttribute != '' ) {
-						doc.batch( 'transparent' ).setAttribute( imageElement, 'srcset', srcsetAttribute );
+						doc.batch( 'transparent' ).setAttribute( imageElement, 'responsive', {
+							srcset: srcsetAttribute,
+							width: maxWidth
+						} );
 					}
 				} );
 

+ 1 - 1
packages/ckeditor5-upload/tests/imageuploadengine.js

@@ -353,7 +353,7 @@ describe( 'ImageUploadEngine', () => {
 			doc.once( 'changesDone', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'[<figure class="image ck-widget" contenteditable="false">' +
-						'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w"></img>' +
+						'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w" width="800"></img>' +
 					'</figure>]<p>foo bar</p>'
 				);
 				expect( loader.status ).to.equal( 'idle' );