CKEditor Custom Plugins Button - ckeditor

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 in the toolbar of the editor. As I'm a new user, you'll have to click through to see attached image; the highlighted square in the top left should have a pretty picture (like most of the other toolbar items).

Answer 1

I have written a complete tutorial covering every aspect of CKeditor plugin development, including buttons, context menus, dialogs and more.

Answer 2

The answer is to set the icon property of the button settings like so:
editor.ui.addButton('your-plugin', {
label: 'Your Plugin Label',
command: 'YourPlugin',
icon: this.path + 'images/your-plugin.jpg'
});
Your plugin directory should have an "images" subdirectory where your button should go. In the above snippet, replace "your-plugin.jpg' with the JPG, GIF or PNG image for your button.
This answer, of course, assumes that you know how to create a button image using some image editor like Gimp, Photoshop, etc.

Answer 3

Some info for others try to write plugins for CKEditor 3.0.
I've started by copying the source from plugins/flash and have now got a button with a youtube logo.... this is an extract from plugins/youtube/plugin.js
editor.ui.addButton( 'YouTube',
{
label : editor.lang.common.youtube,
command : 'youtube',
icon: this.path + 'images/youtube.gif'
});
Also you'll need to edit you language file.... e.g. lang/en.js
Add your plugin name to the "common" section (this appears as a tooltip when you hover over the button) and add a whole block for your plugin, with all your strings, like this....
// YouTube Dialog
youtube :
{
properties : 'YouTube Properties',
propertiesTab : 'Properties',
title : 'YouTube Properties',
chkPlay : 'Auto Play',
chkLoop : 'Loop',
chkMenu : 'Enable YouTube Menu',
chkFull : 'Allow Fullscreen',
scale : 'Scale',
scaleAll : 'Show all',
scaleNoBorder : 'No Border',
scaleFit : 'Exact Fit',
access : 'Script Access',
accessAlways : 'Always',
accessSameDomain : 'Same domain',
accessNever : 'Never',
align : 'Align',
alignLeft : 'Left',
alignAbsBottom: 'Abs Bottom',
alignAbsMiddle: 'Abs Middle',
alignBaseline : 'Baseline',
alignBottom : 'Bottom',
alignMiddle : 'Middle',
alignRight : 'Right',
alignTextTop : 'Text Top',
alignTop : 'Top',
quality : 'Quality',
qualityBest : 'Best',
qualityHigh : 'High',
qualityAutoHigh : 'Auto High',
qualityMedium : 'Medium',
qualityAutoLow : 'Auto Low',
qualityLow : 'Low',
windowModeWindow : 'Window',
windowModeOpaque : 'Opaque',
windowModeTransparent : 'Transparent',
windowMode : 'Window mode',
flashvars : 'Variables for YouTube',
bgcolor : 'Background color',
width : 'Width',
height : 'Height',
hSpace : 'HSpace',
vSpace : 'VSpace',
validateSrc : 'URL must not be empty.',
validateWidth : 'Width must be a number.',
validateHeight : 'Height must be a number.',
validateHSpace : 'HSpace must be a number.',
validateVSpace : 'VSpace must be a number.'
}

Answer 4

these are some plugins for CKEditor 3.x
CKEditor Plugins
Highslide JS Plugin,
LrcShow Plugin,
FileIcon Plugin,
InsertHtml Plugin,
SyntaxHighlighter Plugin
Download: CKEditor 3.x Plugins

Answer 5

There is a pretty exhaustive tutorial on CKEditor Documentation Website, see: CKEditor Plugin SDK - Introduction
At this moment it covers:
Creating an Editor Command
Creating the Toolbar Button with an icon
Explanation on how to register the plugin in CKEditor
Creating Plugin Dialog Window with Two tabs
Adding Context Menu
Advanced Content Filter (ACF) integration (on a separate page)
If you are interested in creating your own widgets, check also Widgets SDK Tutorial

Answer 6

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'
});

Answer 7

Regarding font awesome, I was able to achieve this using CSS:
span.cke_button_icon.cke_button__bold_icon {
position: relative !important;
background-image: none !important;
&:after {
font-family: FontAwesome;
position: absolute;
font-size: 16px;
content: "\f032";
}
}