Question

我有一个自定义ckeditor 4.0插件，可以通过ajax保存数据，我想在保存数据后显示一个带有服务器响应的ckeditor对话框。我的插件代码是： 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

这就是我的保存。我想知道如何做一个消息而不是警报。（之前从未发布过代码，所以我希望它有效）

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

Answer 2

关键是在jQuery.ajax success处理程序或返回的deferred对象的done方法中显示一个隐藏的元素（可能是div）。

假设我们有一个带有以下标记的div（注意position:absolute，它允许div位于所有其他元素之上）：

<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>

然后

$.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);
    });

同样使用deferred.done方法

    $.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);
    });

实际上，每次发布更新时，我通常都会创建并重新创建“message-sent”div。重新计算div的位置，将其放在页面的中心，并在其中插入响应文本。像这样：

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

如何在ajax post后显示ckeditor消息

2 个答案: