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 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";
  }
}