CKEditor Custom Plugins Button

Question

I\'ve written a custom plugin for CKEditor--successful on all fronts, save one currently: I can\'t, for the life of me, figure out how to customize the image on the button

Answer 1

To add your custom icon you need to edit skins/moono/*.css For the editor itself you need to add the same CSS class in the following files

• editor.css
• editor_gecko.css (firefox)
• editor_ie.css
• editor_ie7.css
• editor_ie8.css
• editor_iequirks.css

The format name for a CSS button class is .cke_button__myCustomIcon_icon

You can either use your own image file for the icon or edit the sprite /skins/moono/icons.png to add your's.

In your plugin.js you need to have something like

editor.ui.addButton('myplugin',
{
    label: 'myplugin',
    command: FCKCommand_myplugin,
    icon: 'myCustomIcon'
});