Procházet zdrojové kódy

Added docs and fixes to image converters.

Szymon Kupś před 9 roky
rodič
revize
8931f425fe

+ 11 - 16
packages/ckeditor5-image/src/converters.js

@@ -7,8 +7,6 @@
  * @module image/converters
  */
 
-import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
-import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import { isImageWidget } from './utils';
 
@@ -93,26 +91,23 @@ export function modelToViewSelection( t ) {
 }
 
 /**
- * Converts model `image` element to view representation:
+ * Creates image attribute converter for provided model conversion dispatchers.
  *
- *		<figure class="image"><img src="..." alt="..."></img></figure>
- *
- * @param {module:engine/model/element~Element} modelElement
- * @return {module:engine/view/containerelement~ContainerElement}
+ * @param {Array.<module:engine/conversion/modelconversiondispatcher~ModelConversionDispatcher>} dispatchers
+ * @param {String} attributeName
  */
-export function modelToViewImage() {
-	return new ViewContainerElement( 'figure', { class: 'image' }, new ViewEmptyElement( 'img' ) );
-}
-
-export function imageAttributeToView( dispatchers, attributeName ) {
+export function createImageAttributeConverter( 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 );
+		dispatcher.on( `addAttribute:${ attributeName }:image`, modelToViewAttributeConverter );
+		dispatcher.on( `changeAttribute:${ attributeName }:image`, modelToViewAttributeConverter );
+		dispatcher.on( `removeAttribute:${ attributeName }:image`, modelToViewAttributeConverter );
 	}
 }
 
-function imageAttributeConverter( evt, data, consumable, conversionApi ) {
+// Model to view image converter converting given attribute, and adding it to `img` element nested inside `figure` element.
+//
+// @private
+function modelToViewAttributeConverter( evt, data, consumable, conversionApi ) {
 	const parts = evt.name.split( ':' );
 	const consumableType = parts[ 0 ] + ':' + parts[ 1 ];
 

+ 19 - 5
packages/ckeditor5-image/src/imageengine.js

@@ -10,8 +10,10 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 import WidgetEngine from './widget/widgetengine';
-import { modelToViewImage, viewToModelImage, modelToViewSelection, imageAttributeToView } from './converters';
+import { viewToModelImage, modelToViewSelection, createImageAttributeConverter } from './converters';
 import { toImageWidget } from './utils';
+import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
+import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement';
 
 /**
  * The image engine plugin.
@@ -47,15 +49,15 @@ export default class ImageEngine extends Plugin {
 		// Build converter from model to view for data pipeline.
 		buildModelConverter().for( data.modelToView )
 			.fromElement( 'image' )
-			.toElement( () => modelToViewImage() );
+			.toElement( () => createImageViewElement() );
 
 		// Build converter from model to view for editing pipeline.
 		buildModelConverter().for( editing.modelToView )
 			.fromElement( 'image' )
-			.toElement( () => toImageWidget( modelToViewImage() ) );
+			.toElement( () => toImageWidget( createImageViewElement() ) );
 
-		imageAttributeToView( [ editing.modelToView, data.modelToView ], 'src' );
-		imageAttributeToView( [ editing.modelToView, data.modelToView ], 'alt' );
+		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'src' );
+		createImageAttributeConverter( [ editing.modelToView, data.modelToView ], 'alt' );
 
 		// Converter for figure element from view to model.
 		data.viewToModel.on( 'element:figure', viewToModelImage() );
@@ -64,3 +66,15 @@ export default class ImageEngine extends Plugin {
 		editing.modelToView.on( 'selection', modelToViewSelection( editor.t ), { priority: 'lowest' } );
 	}
 }
+
+// Creates view element representing the image.
+//
+//		<figure class="image"><img></img></figure>
+//
+// Note that `alt` and `src` attributes are converted separately, so they're not included.
+//
+// @private
+// @return {module:engine/view/containerelement~ContainerElement}
+export function createImageViewElement() {
+	return new ViewContainerElement( 'figure', { class: 'image' }, new ViewEmptyElement( 'img' ) );
+}