diff --git a/plugins/button/plugin.js b/plugins/button/plugin.js index 4601b10a79b..4eb69fe9e0d 100644 --- a/plugins/button/plugin.js +++ b/plugins/button/plugin.js @@ -260,14 +260,15 @@ } var name = this.name || this.command, - iconPath = null; + iconPath = null, + overridePath = this.icon; iconName = name; // Check if we're pointing to an icon defined by another command. (https://dev.ckeditor.com/ticket/9555) if ( this.icon && !( /\./ ).test( this.icon ) ) { iconName = this.icon; - this.icon = null; + overridePath = null; } else { // Register and use custom icon for button (#1530). @@ -281,7 +282,7 @@ if ( iconPath ) { CKEDITOR.skin.addIcon( iconPath, iconPath ); - this.icon = null; + overridePath = null; } else { iconPath = iconName; } @@ -301,7 +302,7 @@ keydownFn: keydownFn, focusFn: focusFn, clickFn: clickFn, - style: CKEDITOR.skin.getIconStyle( iconPath, ( editor.lang.dir == 'rtl' ), this.icon, this.iconOffset ), + style: CKEDITOR.skin.getIconStyle( iconPath, ( editor.lang.dir == 'rtl' ), overridePath, this.iconOffset ), arrowHtml: this.hasArrow ? btnArrowTpl.output() : '' }; diff --git a/plugins/easyimage/plugin.js b/plugins/easyimage/plugin.js index 33ac4fb52bc..90cc88f790d 100644 --- a/plugins/easyimage/plugin.js +++ b/plugins/easyimage/plugin.js @@ -168,7 +168,9 @@ editor.ui.addButton( 'Easyimage' + capitalize( style ), { label: styles[ style ].label, command: 'easyimage' + capitalize( style ), - toolbar: 'easyimage,99' + toolbar: 'easyimage,99', + icon: styles[ style ].icon, + iconHiDpi: styles[ style ].iconHiDpi } ); } } diff --git a/tests/plugins/easyimage/customstyleicons.js b/tests/plugins/easyimage/customstyleicons.js new file mode 100644 index 00000000000..628f47965de --- /dev/null +++ b/tests/plugins/easyimage/customstyleicons.js @@ -0,0 +1,75 @@ +/* bender-tags: editor */ +/* bender-ckeditor-plugins: floatingspace,easyimage,toolbar */ + +( function() { + 'use strict'; + + var buttonCreated = false, + commonConfig = { + easyimage_styles: { + test: { + icon: 'tests/_assets/sample_icon.png', + iconHiDpi: 'tests/_assets/sample_icon.hidpi.png' + } + }, + easyimage_toolbar: [ 'EasyimageTest' ] + }; + + bender.test( { + setUp: function() { + if ( CKEDITOR.env.ie && CKEDITOR.env.version < 11 ) { + assert.ignore(); + } + + var addButton = CKEDITOR.ui.prototype.addButton; + this.addButtonStub = sinon.stub( CKEDITOR.ui.prototype, 'addButton', function( name, definition ) { + if ( definition.command === 'easyimageTest' ) { + buttonCreated = true; + assert.areSame( 'tests/_assets/sample_icon.png', definition.icon, 'button definition.icon has proper value' ); + assert.areSame( 'tests/_assets/sample_icon.hidpi.png', definition.iconHiDpi, 'button definition.iconHiDpi has proper value' ); + } + addButton.call( this, name, definition ); + } ); + }, + + tearDown: function() { + buttonCreated = false; + if ( this.addButtonStub ) { + this.addButtonStub.restore(); + this.addButtonStub = null; + } + }, + + 'test easyimage styles button icons are properly passed to button element (classic)': function() { + bender.editorBot.create( { + name: 'editor1', + creator: 'replace', + config: commonConfig + }, function() { + assert.isTrue( buttonCreated, 'button was created' ); + } ); + }, + + 'test easyimage styles button icons are properly passed to button element (divarea)': function() { + bender.editorBot.create( { + name: 'editor2', + creator: 'replace', + config: CKEDITOR.tools.object.merge( { + extraPlugins: 'divarea' + }, commonConfig ) + }, function() { + assert.isTrue( buttonCreated, 'button was created' ); + } ); + }, + + 'test easyimage styles button icons are properly passed to button element (inline)': function() { + bender.editorBot.create( { + name: 'editor3', + creator: 'inline', + config: commonConfig + }, function() { + assert.isTrue( buttonCreated, 'button was created' ); + } ); + } + } ); +} )(); diff --git a/tests/plugins/easyimage/manual/customstyleicons.html b/tests/plugins/easyimage/manual/customstyleicons.html new file mode 100644 index 00000000000..1cba3a22166 --- /dev/null +++ b/tests/plugins/easyimage/manual/customstyleicons.html @@ -0,0 +1,51 @@ +

Classic editor

+
+

Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.

+
+ foo +
Test image
+
+

Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

+
+ +

Divarea editor

+
+

Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.

+
+ foo +
Test image
+
+

Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

+
+ +

Inline editor

+
+

Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.

+
+ foo +
Test image
+
+

Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

+
+ + diff --git a/tests/plugins/easyimage/manual/customstyleicons.md b/tests/plugins/easyimage/manual/customstyleicons.md new file mode 100644 index 00000000000..c56777b51d3 --- /dev/null +++ b/tests/plugins/easyimage/manual/customstyleicons.md @@ -0,0 +1,13 @@ +@bender-tags: 4.9.0, feature, 932 +@bender-ui: collapsed +@bender-ckeditor-plugins: sourcearea, wysiwygarea, floatingspace, toolbar, easyimage + +## Balloon toolbar style icons + +1. Click on image widget in each editor. + +## Expected: + +Balloon toolbar with one button with custom icon (red Bold icon) appears. + +**Important**: When in HiDPI environment make sure the visible icon is HiDPI version (its path should contain `hidpi` part somewhere).