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

Thanks much for thoughts/advice/help.

Isaac

Screenshot: http://imgur.com/ZNNKe.jpg

Answer 1

add an option, like:

icon : '/your/image/location'

i got problem, with adding onclick action to custom button, when it loads, it runs the action, but if i click on it, it does nothing.

Answer 2

Hi isparling

I'm looking for pointers for converting the youtube plugin from FCKEditor to CKEditor 3.

Have you any pointers? Have you an example of your plugin?

Russell

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

russellfeed, could you give a run down of how you accomplished writing a plugin for CKeditor? I've been working on writing a plugin myself, and there seems to be a lot of very specific things to change in various files but there's no good documentation on the subject yet. So far I started by copying one of the existing plugins from the ckeditor/plugin folder and modifying it. Which files do you have to modify and what do you add to them?

Answer 5

I have written a tutorial covering how to create an iframe (dialog) based plugin for ckeditor. I figured it out when I needed to migrate from fckeditor to ckeditor (due to a bug they wouldn't fix in fck).

Hope you guys find it useful! :)

how to create a ckeditor plugin

Answer 6

Hi, 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 7

hey guys. how can you change the icon dynamically? i am writing a plugin that when clicked, will save a draft of what the user has entered. I want the icon to change, then change back, so it indicates it did something. is there something like editor.ui.editbutton and then i can change the path to the icon? also, it would be great if i can change the label tool. THanks!

Answer 8

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