How to display ckeditor message after ajax post

Question

I have a custom ckeditor 4.0 plugin that saves data via ajax, I want to display a ckeditor dialog with the server response after saving data. My plugin code is: CKEDITOR.plugins.add('ajaxsave', { init: function(editor) {

    var pluginName = 'ajaxsave';

    editor.addCommand(pluginName, {
        exec: function(editor) {
            $.post("page_edit_ajax.asp", {
                data: editor.getSnapshot(),
                menusn: editor.name
            },
            function(data) {

                alert(data);
            })
        },
        canUndo: true
    });

    editor.ui.addButton('Ajaxsave', {
        label: 'Save Ajax',
        command: pluginName,
        icon: this.path + "images/ajaxsave.png",
        className: 'cke_button_save'
    });

}

});

Answer 1

The key is showing an otherwise hidden element (probably a div) within either the jQuery.ajax success handler or the done method of the defered object returned.

Assuming we have a div with the following markup (note position:absolute which allows the div to sit above all other elements):

<div id="message-sent" class="panel" style="display:none;width: 300px; height: 100px;z-index:9999;position:absolute;top:300px;left:500px;"><section><h5>Page Updated!</h5></section></div>

And then

$.ajax({
    type: "POST",
    url: myURL,
    data: myDataObj,
    success: function(data, textStatus,jqXHR){
        var msg =  $('#message-sent');
        msg.show();
        setTimeout(function () {
             msg.fadeOut(2000).remove();
        }, 1000);
    });

Similarly using the deferred.done method

    $.ajax({
        type: "POST",
        url: myURL,
        data: myDataObj
    })
    .done(function (data, textStatus,jqXHR) {
            var msg =  $('#message-sent');
            msg.show();
            setTimeout(function () {
                 msg.fadeOut(2000).remove();
            }, 1000);
    });

In actual fact I usually end up creating and recreating the "message-sent" div each time I post an update. Recalculating the position of the div to place it in the center of the page and inserting response text into it. Something like this:

    var w = $('body').width();
    var h = $('body').height();
    var left = parseInt(Math.round((w - 300) / 2), 10);
    var top = parseInt(Math.round((h - 100) / 2), 10);
    var html = '<div id="message-sent" class="panel" style="display:none;width: 300px; height: 100px;z-index:9999;position:absolute;top:'+top+'px;left:'+left+'px;">' +
               '<section><h5>'+jqXHR.responseText+' updated</h5></section></div>';
    $('body').append(html);
    var msg =  $('#message-sent');
    msg.show();
    setTimeout(function () {
        msg.fadeOut(2000).remove();
    }, 1000);

Answer 2

This is what my save does. I would love to figure out how to do a fading message instead of an alert. (never posted code before so I hope it works)

 (function() {
var saveCmd = { modes:{wysiwyg:1,source:1 },

    exec: function( editor ) {
        var $form = editor.element.$.form;

          if ( $form ) {
            try {
                $.ajax({
                    type: "POST",
                    url: (window.location.href),
                    data: {editpage:'savechanges',
                            pagecontent:editor.getData()},
                    cache: false,
                    success: function(){
                        editor.resetDirty();
                        alert("Edits saved.");          
        }
        });

            } catch ( e ) {
                // If there's a button named "submit" then the form.submit
                // function is masked and can't be called in IE/FF, so we
                // call the click() method of that button.
            //  if ( $form.submit.click ) $form.submit.click();
            }
        }
    }
};

var pluginName = 'save';

// Register a plugin named "save".
CKEDITOR.plugins.add( pluginName, {
    lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en-au,en-ca,en-gb,en,eo,es,et,eu,fa,fi,fo,fr-ca,fr,gl,gu,he,hi,hr,hu,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt-br,pt,ro,ru,sk,sl,sr-latn,sr,sv,th,tr,ug,uk,vi,zh-cn,zh', // %REMOVE_LINE_CORE%
    icons: 'save', // %REMOVE_LINE_CORE%
    init: function( editor ) {

        // Save plugin is for replace mode only.
        if ( editor.elementMode != CKEDITOR.ELEMENT_MODE_REPLACE )
            return;

        var command = editor.addCommand( pluginName, saveCmd );
        command.modes = { wysiwyg: !!( editor.element.$.form ), source: 1 };

        editor.ui.addButton && editor.ui.addButton( 'Save', {
            label: editor.lang.save.toolbar,
            command: pluginName,
            toolbar: 'main,10'
        });
    }
});
})();