How to add an ajax save button with loading gif to

Question

I'm posting this because this may be helpful for people who do not know how to display a save icon to ckeditor in normal and inline-editing mode. I was searching for a simple save plugin but couldn't find one that was working with ckeditor 4.2.1. I decided to make my own. In my answer you'll find the code for the plugin as well as a google drive download link. This download contains the save icon as well as the loading gif icon.

The plugin will add a save button to the toolbar. Clicking this button will fire an asynchronous post request to the server. During the request the save button will display an animated ajax loader.

Answer 1

Download working plugin: https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1

This plugin uses jquery but you could easily rewrite it using pure javascript! Be sure you included jquery to your pages before including ckeditor

first register the plugin in the config.js file (just add these lines at the end of your config.js file)

config.extraPlugins = 'savebtn';//savebtn is the plugin's name
config.saveSubmitURL = 'http://server/link/to/post/';//link to serverside script to handle the post

Now we are ready to add the plugin to ckeditor. Download the plugin (see google drive download link above) and extract the zip file in your ckeditors plugin folder. (the download contains the scripts below together with the used icons)

That's it. The plugin should work now!

For reference I included the source (plugin.js) at the bottom of this answer. I suggest you read the comments if you don't know what's going on. The comments in the code from this answer differs slightly from the comments in the actual plugin file. Most up to date comments can be found here. The business logic is exactly the same.

plugin.js

CKEDITOR.plugins.add( 'savebtn', {
    icons: 'savebtn',
    init: function( editor ) {
        //add a new command to the editor. 
        //We give the command a name 'savecontent', 
        //so we can  reference it later. 
        editor.addCommand( 'savecontent', {
            //this is the business logic of our 'savecontent' command. 
            //this function gets executed when clicking the button.
            //you can change/replace the logic of this function  
            //according to your own needs.
            exec : function(editor){

                //get the text from ckeditor you want to save
                var data = editor.getData();

                //get the current url (optional)
                var page = document.URL;

                //path to the ajaxloader gif
                loading_icon=CKEDITOR.basePath+'plugins/savebtn/icons/loader.gif';

                //css style for setting the standard save icon. 
                //We need this when the request is completed.
                normal_icon=$('.cke_button__savebtn_icon').css('background-image');

                //replace the standard save icon with the ajaxloader icon. 
                //We do this with css.
                $('.cke_button__savebtn_icon').css("background-image", "url("+loading_icon+")");

                //Now we are ready to post to the server...
                $.ajax({
                    url: editor.config.saveSubmitURL,//the url to post at... configured in config.js
                    type: 'POST', 
                    data: {text: data, id: editor.name, page: page},//editor.name contains the id of the current editable html tag
                })
                .done(function(response) {
                    console.log("success");
                    alert('id: '+editor.name+' \nurl: '+page+' \ntext: '+data);

                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                    //set the button icon back to the original
                    $('.cke_button__savebtn_icon').css("background-image", normal_icon);
                });


            } 
    });


//add the save button to the toolbar. Mind that we declare command: 'savecontent'. 
//This way ckeditor knows what to do when clicking the button.

        editor.ui.addButton( 'savebtn', {
            label: 'Save',
            command: 'savecontent'
           // toolbar: 'insert'
        });


    }
});