Merge branch 't/11079' into major

Author: Piotr Jasiun

CHANGES.md

@@ -21,6 +21,7 @@ New Features:
   * fix minor bugs,
 * [#10028](http://dev.ckeditor.com/ticket/10028): New [`config.dialog_noConfirmCancel`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-dialog_noConfirmCancel) configuration option that eliminates the need to confirm closing of a dialog window when the user changed any of its fields.
 * [#10848](http://dev.ckeditor.com/ticket/10848): Integrate remaining plugins (style, format, font, color, language and indent ) with active filter.
+* [#11079](http://dev.ckeditor.com/ticket/11079): Add button icons to Placeholder sample.
 
 Fixed Issues:
 

plugins/placeholder/plugin.js

@@ -33,7 +33,6 @@
 			// Put ur init code here.
 			editor.widgets.add( 'placeholder', {
 				// Widget code.
-				button: lang.toolbar,
 				dialog: 'placeholder',
 				pathName: lang.pathName,
 				// We need to have wrapping element, otherwise there are issues in
@@ -53,6 +52,13 @@
 					this.element.setText( '[[' + this.data.name + ']]' );
 				}
 			} );
+
+			editor.ui.addButton && editor.ui.addButton( 'CreatePlaceholder', {
+				label: lang.toolbar,
+				command: 'placeholder',
+				toolbar: 'insert,5',
+				icon: 'placeholder'
+			});
 		},
 
 		afterInit: function( editor ) {

plugins/placeholder/samples/placeholder.html

@@ -8,6 +8,7 @@
 	<title>Placeholder Plugin &mdash; CKEditor Sample</title>
 	<meta charset="utf-8">
 	<script src="../../../ckeditor.js"></script>
+	<script src="../../../samples/sample.js"></script>
 	<link rel="stylesheet" href="../../../samples/sample.css">
 	<meta name="ckeditor-sample-name" content="Placeholder plugin">
 	<meta name="ckeditor-sample-group" content="Plugins">
@@ -22,11 +23,11 @@ <h1 class="samples">
 			This sample shows how to configure CKEditor instances to use the
 			<strong>Placeholder</strong> plugin that lets you insert read-only elements
 			into your content. To enter and modify read-only text, use the
-			<strong>Create Placeholder</strong> button and its matching dialog window.
+			<strong>Create Placeholder</strong> <span class="button_icon" data-icon="placeholder">&nbsp;</span> button and its matching dialog window.
 		</p>
 		<p>
 			To add a CKEditor instance that uses the <code>placeholder</code> plugin and a related
-			<strong>Create Placeholder</strong> toolbar button, insert the following JavaScript
+			<strong>Create Placeholder</strong> <span class="button_icon" data-icon="placeholder">&nbsp;</span> toolbar button, insert the following JavaScript
 			call to your code:
 		</p>
 <pre class="samples">
@@ -48,8 +49,7 @@ <h1 class="samples">
 			<script>
 
 				CKEDITOR.replace( 'editor1', {
-					extraPlugins: 'placeholder',
-					toolbar: [ [ 'Source', 'Bold' ], [ 'Placeholder' ] ]
+					extraPlugins: 'placeholder'
 				});
 
 			</script>

samples/sample.js

@@ -7,8 +7,8 @@
 // This file can be ignored and is not required to make use of CKEditor.
 
 (function() {
-	// Check for sample compliance.
 	CKEDITOR.on( 'instanceReady', function( ev ) {
+		// Check for sample compliance.
 		var editor = ev.editor,
 			meta = CKEDITOR.document.$.getElementsByName( 'ckeditor-sample-required-plugins' ),
 			requires = meta.length ? CKEDITOR.dom.element.get( meta[ 0 ] ).getAttribute( 'content' ).split( ',' ) : [],
@@ -29,6 +29,22 @@
 				warn.insertBefore( editor.container );
 			}
 		}
-	});
+
+		// Set icons.
+		var doc = new CKEDITOR.dom.document( document ),
+			icons = doc.find( '.button_icon' );
+
+		for ( var i = 0, count = icons.count(); i < count; i++ ) {
+			var icon = icons.getItem( i ),
+				name = icon.getAttribute( 'data-icon' ),
+				style = CKEDITOR.skin.getIconStyle( name, ( CKEDITOR.lang.dir == 'rtl' ) );
+
+			icon.addClass( 'cke_button_icon' );
+			icon.addClass( 'cke_button__' + name + '_icon' );
+			icon.setAttribute( 'style', style );
+			icon.setStyle( 'float', 'none' );
+
+		};
+	} );
 })();
 // %LEAVE_UNMINIFIED% %REMOVE_LINE%