浏览代码

Added placeholder to the image caption.

Szymon Kupś 8 年之前
父节点
当前提交
c749297008

+ 2 - 1
packages/ckeditor5-image/lang/contexts.json

@@ -3,5 +3,6 @@
 	"Side image": "Label for the Side image option.",
 	"Full size image": "Label for the Full size image option.",
 	"Change image text alternative": "Label for the Change image text alternative button.",
-	"Text alternative": "Label for the image text alternative input."
+	"Text alternative": "Label for the image text alternative input.",
+	"Enter image caption": "Placeholder text for image caption displayed when caption is empty."
 }

+ 2 - 1
packages/ckeditor5-image/src/imagecaption/imagecaptionengine.js

@@ -42,6 +42,7 @@ export default class ImageCaptionEngine extends Plugin {
 		const schema = document.schema;
 		const data = editor.data;
 		const editing = editor.editing;
+		const t = editor.t;
 
 		/**
 		 * Last selected caption editable.
@@ -57,7 +58,7 @@ export default class ImageCaptionEngine extends Plugin {
 		 * @private
 		 * @member {Function}
 		 */
-		this._createCaption = captionElementCreator( viewDocument );
+		this._createCaption = captionElementCreator( viewDocument, t( 'Enter image caption' ) );
 
 		// Schema configuration.
 		schema.registerItem( 'caption' );

+ 4 - 1
packages/ckeditor5-image/src/imagecaption/utils.js

@@ -9,6 +9,7 @@
 
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
+import { attachPlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 import { toWidgetEditable } from '../widget/utils';
 
 const captionSymbol = Symbol( 'imageCaption' );
@@ -17,13 +18,15 @@ const captionSymbol = Symbol( 'imageCaption' );
  * Returns a function that creates caption editable element for the given {@link module:engine/view/document~Document}.
  *
  * @param {module:engine/view/document~Document} viewDocument
+ * @param {String} placeholderText Text to be displayed when caption is empty.
  * @return {Function}
  */
-export function captionElementCreator( viewDocument ) {
+export function captionElementCreator( viewDocument, placeholderText ) {
 	return () => {
 		const editable = new ViewEditableElement( 'figcaption' );
 		editable.document = viewDocument;
 		editable.setCustomProperty( captionSymbol, true );
+		attachPlaceholder( editable, placeholderText );
 
 		return toWidgetEditable( editable );
 	};

+ 28 - 14
packages/ckeditor5-image/tests/imagecaption/imagecaptionengine.js

@@ -101,7 +101,9 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-editable" contenteditable="true">Foo bar baz.</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+							'Foo bar baz.' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -112,7 +114,8 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-editable ck-editable_hidden" contenteditable="true"></figcaption>' +
+						'<figcaption class="ck-placeholder ck-editable ck-editable_hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -163,7 +166,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img alt="" src=""></img>' +
-					'<figcaption class="ck-editable ck-editable_hidden" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable ck-editable_hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -184,7 +188,9 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img alt="" src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+						'foo bar' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -211,7 +217,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -222,7 +229,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable ck-editable_hidden" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable ck-editable_hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -233,7 +241,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">foo bar</figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -248,7 +256,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable ck-editable_hidden" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable ck-editable_hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -263,7 +272,9 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">[]</figcaption>' +
+					'<figcaption class="ck-editable ck-placeholder" contenteditable="true" data-placeholder="Enter image caption">' +
+						'[]' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -280,7 +291,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable ck-placeholder" contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -296,11 +307,11 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">foo bar</figcaption>' +
 				'</figure>' +
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable" contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -325,7 +336,8 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'[]<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption class="ck-editable ck-editable_hidden" contenteditable="true"></figcaption>' +
+						'<figcaption class="ck-editable ck-editable_hidden ck-placeholder" contenteditable="true" data-placeholder="Enter image caption">' +
+						'</figcaption>' +
 					'</figure>'
 				);
 
@@ -335,7 +347,9 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption class="ck-editable" contenteditable="true">{foo bar baz}</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+							'{foo bar baz}' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );

+ 6 - 2
packages/ckeditor5-image/tests/imagecaption/utils.js

@@ -19,16 +19,20 @@ describe( 'image captioning utils', () => {
 
 	beforeEach( () => {
 		document = new ViewDocument();
-		const creator = captionElementCreator( document );
+		const creator = captionElementCreator( document, 'placeholder text' );
 		element = creator();
 	} );
 
-	describe( 'editableCaptionCreator', () => {
+	describe( 'captionElementCreator', () => {
 		it( 'should create figcatpion editable element', () => {
 			expect( element ).to.be.instanceOf( ViewEditableElement );
 			expect( element.name ).to.equal( 'figcaption' );
 			expect( isCaption( element ) ).to.be.true;
 		} );
+
+		it( 'should attach placeholder', () => {
+			expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'placeholder text' );
+		} );
 	} );
 
 	describe( 'isCaptionEditable', () => {