Creating Plugins in CKeditor

I'm creating a plugin which allows the user to insert a slideshow into the text area using code from Slideshow2 on the google code source. Slideshow2 works great for me and I'm able to get it working by simply inserting a slideshow instance into the text area, but now I want a button to insert it without messing with the source. This will also allow the user to choose images for the slideshow using CKFinder.

I looked at the _samples directory and played around with the "api_dialog" example and was able to create a custom button with custom dialog boxes, but I am more interested in creating a genuine plugin for my application.

Looking through the forum I haven't found any solid information on creating plugins within CKeditor yet. Can someone enlighten me on a step-by-step process to create a new plugin?

So far I have decided to start by copying an existing plugin from the ckeditor/plugins directory. Specifically I copied the image plugin and started modifying it. Getting deeper into it I have come to find that there's some very specific code to add to a few different files. Can anyone help here? Which files need what? When I'm done I'll post on the exact method I used to accomplish it.

Wed, 09/02/2009 - 04:07

vwinstead

Joined: 02/02/2009

Posts: 23

Re: Creating Plugins in CKeditor

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

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

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

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

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

buttons : [ CKEDITOR.dialog.okButton ]