Creating Plugins in CKeditor

OK, my knowledge is limited to playing around with existing plugins and code, but I've learned a few things. I know how to create a custom button and use my own image for it. I also know the basic structure for the plugins and what other code files they interact with.

As for the folder structure, you have to add a folder to the ckeditor/plugins folder and you'll name it the name of your plugin. Under this will be a file called "plugin.js" and a folder called "dialogs". The dialogs folder has a file in it with the same name as your plugin, like this: "slideshow.js". The dialogs file will further define your menu structure for when you click the button on the ckeditor instance. You can just take a look at the plugins directory for LOTS of examples since every single ckeditor button is in here. Although you should look at the ckeditor\_source\plugins folder instead since this code has not been optimized for fast downloads (it's way easier to read).

To start creating your files, you must alter the en.js file under the ckeditor/lang folder (or corresponding file for whatever language you're using). Alternatively you can just create your own en.js file here: ckeditor/plugins/slideshow/lang/en.js. Then you show the ckeditor/plugins/slideshow/plugin.js file where this new en.js file resides by adding the following:

CKEDITOR.plugins.add( 'slideshow',
{
   requires : [ 'dialog' ],
   lang : [ 'en' ],
...etc

If you want to change the en.js file directly you have two areas that must be changed: common and <plugin name>. Common section will look like this:

   // Common messages and labels.
   common :
   {
      slideshow      : 'Slideshow',
      browseServer   : 'Browse Server',
      url            : 'URL',
              ...etc

The next part is the name of your plugin and will look like this:

        //Slideshow Dialog.
   slideshow :
   {
      title : 'Slideshow',
      preview : 'preview',
   },

That part is just some info that you can use in your dialog tabs and menus. Inside your plugin.js file you'll reference them like the "label" bit in the following code:

      editor.ui.addButton( 'Slideshow',
         {
            label : editor.lang.slideshow.title,
            command : 'slideshow',
            icon : this.path + 'logo.gif'
         });
      CKEDITOR.dialog.add( 'slideshow', this.path + 'dialogs/slideshow.js' );

This last bit of code will add a button to the ckeditor instance defined. The label here tells it to use the title value from en.js at the top of the box that will pop up when you click the button. The icon used in the taskbar of ckeditor is listed here and located in the "ckeditor/plugins/slideshow" directory. The dialog.add shows that the code needs to look at the slideshow.js file for further info about what the pop up window should look like when you click the button.


Within slideshow.js we have more info about what the popup window should look like. The file looks like this:

CKEDITOR.dialog.add( 'slideshow', function( editor )
{
   return {
      title : editor.lang.slideshow.title,
      minWidth : 360,
      minHeight : 320,
      onLoad : function()
      {
         dialog = this;
         this.setupContent();

         if ( CKEDITOR.env.ie7Compat )
            dialog.parts.contents.setStyle( 'overflow', 'hidden' );
      },
      contents : [
         {
            id : 'tab1',
            expand : true,
            padding : 0,
            elements : 
            [
                  {
                     id : 'tab1',
                     type : 'vbox',
                     children :
                     [
                                               {
                           id : 'livePeview',
                           type : 'checkbox',
                           label : editor.lang.slideshow.preview,
                           'default' : 1,
                           onLoad : function()
                           {
                              skipPreviewChange = true;
                           },

This shows how the popup is structured after the "contents" reference. Everything before this is configuration functions and variables...etc. The contents looks like it defines the look of the box itself. Then we see the elements of the contents and a bunch of children under each element. Elements will usually be things like tabs and different distinct sections of the popup. Children of the element could be things like checkboxes, selectboxes and text inputs and such. Each element and child will have an id and a type to start with. There are a lot of differnt types like vbox, hbox, http...etc.

Then at the end of slideshow.js it will have something like an OK button:

buttons : [ CKEDITOR.dialog.okButton ]

That's as far as I've got so far. But that's just the appearance, and only a small part of what's available. Now I need to learn more about calling functions and using a browse button to find an image on the local hard drive for uploads. If anyone has some input on how to incorporate a browse button easily I'd appreciate it. Until then I'll be sifting through all the code.