Cannot apply a custom classname to a button icon

[Teresa Monahan]

We have a usecase where we would like to reuse an existing icon for a menubutton on the toolbar.

To see an example of this:

• Extract the attached zip. Copy linkmenu into the plugins directory and toolbarMenu.html into the samples directory.
• Open toolbarMenu.html in a browser and click on the toolbar menu item.

We would like to reuse the link icon as the icon for the toolbar menu. However this is not possible in v4.

We could achieve this in v3 by applying a custom class to the menu button and then using the cke_icon class in the selector to style the icon e.g. .cke_button_link .cke_icon {....}

This does not work in V4 though because the class on the icon is specific to the feature it is for. Therefore the class for the icon of the menu button in the attached example is set to the following by default:

cke_button_icon cke_button__mylinkmenu_icon

We need to be able to add a custom class to this so that we can reuse an existing icon e.g. adding the

cke_button__link_icon

class would apply the styles for this class that are generated during the build process:

.cke_button__link_icon{background:url(icons.png) no-repeat 0 -1472px!important}

Specifying styling for the

cke_button__mylinkmenu_icon

class is not an option because the position of the link icon in the sprite is subject to change during the build process when the sprite is generated.

Ideally we would like to be able to add custom classes for menu item icons too.

[Frederico Caldeira Knabben]

If using .cke_button__mylinkmenu_icon is not an option, why adding a custom class to the icon would help?

I have the impression that you have the very same possibility you had earlier with CKEditor 3, just the CSS selector changed. The real difference is that he v4 building process is much more dynamic, so you're not able to predict the position of the icon to "steal". At that point, the solution would be providing an icon to "mylinkmenu". Even if it would result in a duplication in the icons strip, the impact of it is certainly minimal.

I would invalidate this ticket, but better to have a confirmation. Did I misunderstand anything here?

[Teresa Monahan]

Replying to fredck:

If using .cke_button__mylinkmenu_icon is not an option, why adding a custom class to the icon would help?

We could add cke_button__link_icon as an additional classname for the mylinkmenu icon and therefore the icon that is specified for the link command would also be applied as the mylinkmenu icon.

I have the impression that you have the very same possibility you had earlier with CKEditor 3, just the CSS selector changed. The real difference is that he v4 building process is much more dynamic, so you're not able to predict the position of the icon to "steal". At that point, the solution would be providing an icon to "mylinkmenu". Even if it would result in a duplication in the icons strip, the impact of it is certainly minimal.

We have considered the option of duplicating icons but there are quite a number of places where we reuse icons so this would result in 10-15 duplicated images in the icon strip and many extra css rules in editor.css after a build. This is not very sustainable in the long term and seems unnecessary when the image and CSS that we require are already available.

As you said above, the CSS selector in v4 has changed - the icon classname is now specific to the ui item. In v3, we had more control over icon styling because we could add a custom class to the menubutton and then use the generic .cke_icon selector to style the image. Also the fact that the sprite is now auto-generated means that we do not know the position of a specific icon within the sprite and therefore we cannot simply provide styling for the cke_button__mylinkmenu_icon class.

The only way we can see to achieve the same behavior as we had in v3 is to be able to add a custom classname to the span for the mylinkmenu icon. If we could do this we would update the class attribute to:

cke_button_icon cke_button__mylinkmenu_icon cke_button__link_icon

and the desired icon would be displayed for the menubutton.

[Frederico Caldeira Knabben]

I misobserved your original report. Your last comment clarified it.

The title says that you cannot add a "custom" class to the icon, but instead you want to reuse the class of another icon. This is totally different, because you have no interest on defining the styles of you "custom" class.

Well... your solution is... well... a hack :P

You're lucky that it works, because depending on the order of the classes in the CSS, this thing will not work. (I didn't check it, but that's my feeling)

So, the real need is using an icon defined by another plugin.

Instead of hacking the icon to add an additional class to it, we should instead explicitly tell the button plugin to use an already defined icon.

I'm adding a proposal for this on t/9555. The idea is that it'll be enough to add icon:'link' in the button definition to reuse the "link" icon on it.

Note that the branch has an additional commit that demonstrates the feature on the About button. That commit will not be masterised.

[Frederico Caldeira Knabben]

Fixed with 87d2fce.

[Teresa Monahan]

Replying to fredck:

Fixed with 87d2fce.

Thanks for working on this. I will try out the proposed solution.

I do not fully understand your last comment though. What do you mean by 'depending on the order of the classes in the CSS, this thing will not work'?

Also can this please be enabled for menu items too?