CKEditor Custom Plugins Button

问题

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).

回答1:

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

回答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.

回答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.'
}

回答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

回答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

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

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

来源：https://stackoverflow.com/questions/1139766/ckeditor-custom-plugins-button

标签

ckeditor