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

Converting alt and src image attributes separately.

Szymon Kupś 9 лет назад
Родитель
Сommit
3bbe40a01c
2 измененных файлов с 31 добавлено и 10 удалено
  1. 25 7
      packages/ckeditor5-image/src/converters.js
  2. 6 3
      packages/ckeditor5-image/src/imageengine.js

+ 25 - 7
packages/ckeditor5-image/src/converters.js

@@ -100,14 +100,32 @@ export function modelToViewSelection( t ) {
  * @param {module:engine/model/element~Element} modelElement
  * @param {module:engine/model/element~Element} modelElement
  * @return {module:engine/view/containerelement~ContainerElement}
  * @return {module:engine/view/containerelement~ContainerElement}
  */
  */
-export function modelToViewImage( modelElement ) {
-	const viewImg = new ViewEmptyElement( 'img', {
-		src: modelElement.getAttribute( 'src' )
-	} );
+export function modelToViewImage() {
+	return new ViewContainerElement( 'figure', { class: 'image' }, new ViewEmptyElement( 'img' ) );
+}
 
 
-	if ( modelElement.hasAttribute( 'alt' ) ) {
-		viewImg.setAttribute( 'alt', modelElement.getAttribute( 'alt' ) );
+export function imageAttributeToView( dispatchers, attributeName ) {
+	for ( let dispatcher of dispatchers ) {
+		dispatcher.on( `addAttribute:${ attributeName }:image`, imageAttributeConverter );
+		dispatcher.on( `changeAttribute:${ attributeName }:image`, imageAttributeConverter );
+		dispatcher.on( `removeAttribute:${ attributeName }:image`, imageAttributeConverter );
 	}
 	}
+}
 
 
-	return new ViewContainerElement( 'figure', { class: 'image' }, viewImg );
+function imageAttributeConverter( evt, data, consumable, conversionApi ) {
+	const parts = evt.name.split( ':' );
+	const consumableType = parts[ 0 ] + ':' + parts[ 1 ];
+
+	if ( !consumable.consume( data.item, consumableType ) ) {
+		return;
+	}
+
+	const figure = conversionApi.mapper.toViewElement( data.item );
+	const img = figure.getChild( 0 );
+
+	if ( parts[ 0 ] == 'removeAttribute' ) {
+		img.removeAttribute( data.attributeKey );
+	} else {
+		img.setAttribute( data.attributeKey, data.attributeNewValue );
+	}
 }
 }

+ 6 - 3
packages/ckeditor5-image/src/imageengine.js

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 import WidgetEngine from './widget/widgetengine';
 import WidgetEngine from './widget/widgetengine';
-import { modelToViewImage, viewToModelImage, modelToViewSelection } from './converters';
+import { modelToViewImage, viewToModelImage, modelToViewSelection, imageAttributeToView } from './converters';
 import { toImageWidget } from './utils';
 import { toImageWidget } from './utils';
 
 
 /**
 /**
@@ -47,12 +47,15 @@ export default class ImageEngine extends Plugin {
 		// Build converter from model to view for data pipeline.
 		// Build converter from model to view for data pipeline.
 		buildModelConverter().for( data.modelToView )
 		buildModelConverter().for( data.modelToView )
 			.fromElement( 'image' )
 			.fromElement( 'image' )
-			.toElement( ( data ) => modelToViewImage( data.item ) );
+			.toElement( () => modelToViewImage() );
 
 
 		// Build converter from model to view for editing pipeline.
 		// Build converter from model to view for editing pipeline.
 		buildModelConverter().for( editing.modelToView )
 		buildModelConverter().for( editing.modelToView )
 			.fromElement( 'image' )
 			.fromElement( 'image' )
-			.toElement( ( data ) => toImageWidget( modelToViewImage( data.item ) ) );
+			.toElement( () => toImageWidget( modelToViewImage() ) );
+
+		imageAttributeToView( [ editing.modelToView, data.modelToView ], 'src' );
+		imageAttributeToView( [ editing.modelToView, data.modelToView ], 'alt' );
 
 
 		// Converter for figure element from view to model.
 		// Converter for figure element from view to model.
 		data.viewToModel.on( 'element:figure', viewToModelImage() );
 		data.viewToModel.on( 'element:figure', viewToModelImage() );