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

Allow to customize upload placeholder.

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

+ 19 - 19
packages/ckeditor5-upload/package.json

@@ -4,29 +4,29 @@
   "description": "Upload Feature for CKEditor 5.",
   "description": "Upload Feature for CKEditor 5.",
   "keywords": [],
   "keywords": [],
   "dependencies": {
   "dependencies": {
-	  "@ckeditor/ckeditor5-core": "^0.7.0",
-	  "@ckeditor/ckeditor5-engine": "^0.8.0",
-	  "@ckeditor/ckeditor5-ui": "^v0.7.1",
-	  "@ckeditor/ckeditor5-utils": "^0.8.0"
+  	"@ckeditor/ckeditor5-core": "^0.7.0",
+  	"@ckeditor/ckeditor5-engine": "^0.8.0",
+  	"@ckeditor/ckeditor5-ui": "^v0.7.1",
+  	"@ckeditor/ckeditor5-utils": "^0.8.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^0.8.0",
-    "@ckeditor/ckeditor5-clipboard": "^0.5.0",
-	"@ckeditor/ckeditor5-dev-lint": "^2.0.2",
-    "@ckeditor/ckeditor5-editor-classic": "^0.7.2",
-    "@ckeditor/ckeditor5-enter": "^0.9.0",
-    "@ckeditor/ckeditor5-heading": "^0.9.0",
-    "@ckeditor/ckeditor5-image": "^0.5.0",
-    "@ckeditor/ckeditor5-list": "^0.6.0",
-    "@ckeditor/ckeditor5-paragraph": "^0.7.0",
-    "@ckeditor/ckeditor5-typing": "^0.9.0",
-    "@ckeditor/ckeditor5-undo": "^0.8.0",
-    "gulp": "^3.9.1",
-    "guppy-pre-commit": "^0.4.0"
+  	"@ckeditor/ckeditor5-basic-styles": "^0.8.0",
+  	"@ckeditor/ckeditor5-clipboard": "^0.5.0",
+  	"@ckeditor/ckeditor5-dev-lint": "^2.0.2",
+  	"@ckeditor/ckeditor5-editor-classic": "^0.7.2",
+  	"@ckeditor/ckeditor5-enter": "^0.9.0",
+  	"@ckeditor/ckeditor5-heading": "^0.9.0",
+  	"@ckeditor/ckeditor5-image": "^0.5.0",
+  	"@ckeditor/ckeditor5-list": "^0.6.0",
+  	"@ckeditor/ckeditor5-paragraph": "^0.7.0",
+  	"@ckeditor/ckeditor5-typing": "^0.9.0",
+  	"@ckeditor/ckeditor5-undo": "^0.8.0",
+  	"gulp": "^3.9.1",
+  	"guppy-pre-commit": "^0.4.0"
   },
   },
   "engines": {
   "engines": {
-    "node": ">=6.0.0",
-    "npm": ">=3.0.0"
+  	"node": ">=6.0.0",
+  	"npm": ">=3.0.0"
   },
   },
   "author": "CKSource (http://cksource.com/)",
   "author": "CKSource (http://cksource.com/)",
   "license": "(GPL-2.0 OR LGPL-2.1 OR MPL-1.1)",
   "license": "(GPL-2.0 OR LGPL-2.1 OR MPL-1.1)",

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

@@ -16,6 +16,17 @@ import { isImageType } from './utils';
  * @extends module:core/plugin~Plugin
  * @extends module:core/plugin~Plugin
  */
  */
 export default class ImageUploadEngine extends Plugin {
 export default class ImageUploadEngine extends Plugin {
+	constructor( editor ) {
+		super( editor );
+
+		/**
+		 * Image's placeholder that is displayed before real image data can be accessed.
+		 *
+		 * @member {String} #placeholder
+		 */
+		this.placeholder = 'data:image/svg+xml;utf8,' + uploadingPlaceholder;
+	}
+
 	/**
 	/**
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
@@ -78,9 +89,8 @@ export default class ImageUploadEngine extends Plugin {
 			const modelImage = data.item;
 			const modelImage = data.item;
 			const viewFigure = editor.editing.mapper.toViewElement( modelImage );
 			const viewFigure = editor.editing.mapper.toViewElement( modelImage );
 			const viewImg = viewFigure.getChild( 0 );
 			const viewImg = viewFigure.getChild( 0 );
-			const svgData = 'data:image/svg+xml;utf8,' + uploadingPlaceholder;
 
 
-			viewImg.setAttribute( 'src', svgData );
+			viewImg.setAttribute( 'src', this.placeholder );
 		} );
 		} );
 	}
 	}
 
 

+ 12 - 0
packages/ckeditor5-upload/tests/imageuploadengine.js

@@ -197,4 +197,16 @@ describe( 'ImageUploadEngine', () => {
 			'[]<figure class="image ck-widget" contenteditable="false"><img src="image.png"></img></figure>'
 			'[]<figure class="image ck-widget" contenteditable="false"><img src="image.png"></img></figure>'
 		);
 		);
 	} );
 	} );
+
+	it( 'should allow to customize placeholder image', () => {
+		const uploadEngine = editor.plugins.get( ImageUploadEngine );
+		uploadEngine.placeholder = base64Sample;
+		setModelData( document, '<image uploadId="1234"></image>' );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'[]<figure class="image ck-widget" contenteditable="false">' +
+			`<img src="${ base64Sample }"></img>` +
+			'</figure>'
+		);
+	} );
 } );
 } );