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

Using configuration option to output image's sizes attribute.

Szymon Kupś 8 лет назад
Родитель
Сommit
112990b107

+ 7 - 1
packages/ckeditor5-image/src/image/imageengine.js

@@ -33,6 +33,7 @@ export default class ImageEngine extends Plugin {
 		const schema = doc.schema;
 		const schema = doc.schema;
 		const data = editor.data;
 		const data = editor.data;
 		const editing = editor.editing;
 		const editing = editor.editing;
+		const config = editor.config;
 		const t = editor.t;
 		const t = editor.t;
 
 
 		// Configure schema.
 		// Configure schema.
@@ -54,12 +55,17 @@ export default class ImageEngine extends Plugin {
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'src' );
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'src' );
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'alt' );
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'alt' );
 
 
+		// Responsive sizes default value. More information and discussion on this topic:
+		// https://github.com/ckeditor/ckeditor5-image/issues/2.
+		config.define( 'image.responsiveSizes', '100vw' );
+		const sizes = config.get( 'image.responsiveSizes' );
+
 		// Convert `srcset` attribute changes and add or remove `sizes` attribute when necessary.
 		// Convert `srcset` attribute changes and add or remove `sizes` attribute when necessary.
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'srcset', ( viewImg, type ) => {
 		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'srcset', ( viewImg, type ) => {
 			if ( type == 'removeAttribute' ) {
 			if ( type == 'removeAttribute' ) {
 				viewImg.removeAttribute( 'sizes' );
 				viewImg.removeAttribute( 'sizes' );
 			} else {
 			} else {
-				viewImg.setAttribute( 'sizes', '100vw' );
+				viewImg.setAttribute( 'sizes', sizes );
 			}
 			}
 		} );
 		} );
 
 

+ 18 - 0
packages/ckeditor5-image/tests/image/imageengine.js

@@ -394,6 +394,24 @@ describe( 'ImageEngine', () => {
 				);
 				);
 			} );
 			} );
 
 
+			it( 'should use sizes from configuration', () => {
+				return VirtualTestEditor.create( {
+					plugins: [ ImageEngine ],
+					image: {
+						responsiveSizes: '50vf'
+					}
+				} )
+				.then( newEditor => {
+					setModelData( newEditor.document, '<image src="foo.png" alt="alt text" srcset="small 148w, big.png 1024w"></image>' );
+
+					expect( getViewData( newEditor.editing.view, { withoutSelection: true } ) ).to.equal(
+						'<figure class="image ck-widget" contenteditable="false">' +
+						'<img alt="alt text" sizes="50vf" src="foo.png" srcset="small 148w, big.png 1024w"></img>' +
+						'</figure>'
+					);
+				} );
+			} );
+
 			it( 'should remove sizes attribute when srcset attribute is removed', () => {
 			it( 'should remove sizes attribute when srcset attribute is removed', () => {
 				setModelData( document, '<image src="foo.png" srcset="small 148w, big.png 1024w"></image>' );
 				setModelData( document, '<image src="foo.png" srcset="small 148w, big.png 1024w"></image>' );
 				const image = document.getRoot().getChild( 0 );
 				const image = document.getRoot().getChild( 0 );