CKEditor 3 Simple Save Button Plug-in

  In a previous post I was talking about how hard it is in the new CKEditor to override the default behavior of the Save button.  By design the Save button will cause the form to post, what I wanted it to do was fire a JavaScript function that would open my Save Dialog.  Turns out you have to write a plug-in to do this.  There are several posts out on the CKSource website that give some code on how to do this, but none of them where quite what I wanted.  So here's my simple Save plug-in for CKEditor 3.

1. Start by creating a folder called ajaxSave in the CKEditor\Plugins folder.
2. Create a new JavaScript file called plugin.js in the ajaxSave folder
3. Paste the following code:
   
   

   (function() {
       var saveCmd =
       {
           modes: { wysiwyg: 1, source: 1 },
           exec: function(editor) {
               showSaveDialog(); // my custom dialog function for doing the save.  Uses JQuery UI
           }
       };
       var pluginName = 'ajaxSave';
       CKEDITOR.plugins.add(pluginName,
       {
         init: function(editor) {
             var command = editor.addCommand(pluginName, saveCmd);
             editor.ui.addButton('AjaxSave',
            {
                label: editor.lang.save,
                command: pluginName,
                icon: "/ckeditor/plugins/ajaxsave/save.png"
            });
         }
     });
   })();

4. Notice the
   icon: "/ckeditor/plugins/ajaxsave/save.png"
   line?  So far I haven't figured out how to reference the default save icon in the skin file so I had to make my own and store it in the same directory as the plugin.  I did this by opening the skin icons.png file I was interested in a chopping out the save icon.
5. You have to tell CKEditor to load the plug-in.  You can do this in your config section, either during CKEditor creation, or in a custom.js config file you load during CKEditor creation.
   The config property looks like this:
   extraPlugins : 'ajaxSave'
6. Lastly, you need to reference the plug-in in the toolbar.  For example, in my CKConfig.js file that I load during editer creationg I have this
   
   

   config.toolbar_Default = [
           ['AjaxSave'], 
           ['Cut', 'Copy', 'Paste', . . . .

That's it.  At first it looks quite difficult, but once you wrap your head around all the bits it starts to make sense.

For those interested, I am pasting my function that creates my CKEditor instances.  This is a work in process and I'm not even close to being done, but I figured it might help someone out there.  I'm using the JQuery adapter to load CKEditor.

// load the CKEDITOR in the given div
function loadCKEditor(Div) {
    var CSSFiles = [];
    CSSFiles[0] = "https://designer.wsu.edu/template/css2.aspx?key=" + $("#hfSiteKey").val();
    CSSFiles[1] = "https://files.ba.wsu.edu/styles/additions" + $("#hfAdditionsVerNum").val() + ".min.css";
    CSSFiles[2] = "https://files.ba.wsu.edu/styles/PageEditor_CKEditor.css";
    $('#' + Div).ckeditor(function() { // this is the callback,
        // edMain, edSecondary and edAdditional are public vars at the top of the js file, this will assign them the instance of the editor we just created so I can manipulate it later.  Note, I'm creating three different editors by calling loadCKEditor 3 times later on.
        if (Div === 'edMain') {
            edMain = $('#edMain').ckeditorGet();
        }
        if (Div === 'edSecondary') {
            edSecondary = $('#edSecondary').ckeditorGet();
        }
        if (Div === 'edAdditional') {
            edAdditional = $('#edAdditional').ckeditorGet();
        }
        var e = $('#' + Div).ckeditorGet();
        $(window).resize(function() {
            var eH = $(window).height() - winHeightSub;
            e.resize(e.config.width, eH);
        });
        fckCompleteCount++;
        if (fckCompleteCount == 3)  // since this gets' called for each FCKeditor_OnComplete (3 times) only want to load when compleatly done.
        {
            if ($("#hfIsDraft").val() == "true") // there is a draft to load, show the chooser dialog
            {
                // set AutoSave = false so it doesn't try to save when dialog is open
                AutoSave = false;
                $("#divLoadDraft").dialog("open");
            }
            else
            { load(false); } // no draft to load, just load the main page text
        }
    }, { // settings
        customConfig: '/Masterpages/myFCKConfig.js',
        toolbarCanCollapse: false,
        toolbar: 'Default',
        sharedSpaces:
                    {
                        top: 'fckToolBar'
                    },
        bodyId: 'content',
        resize_enabled: false,
        contentsCss: CSSFiles,
        extraPlugins : 'ajaxSave',
        height: EditorHeight
    });
}