0

我有一个通过 ajax 保存数据的自定义 ckeditor 4.0 插件，我想在保存数据后显示一个带有服务器响应的 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'
    });

}

});

4

2 回答 2

0

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

 (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'
        });
    }
});
})();
于 2013-12-12T17:09:32.763 回答
0

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

假设我们有一个带有以下标记position:absolute的 div（注意它允许 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);
    });

实际上，每次发布更新时，我通常最终都会创建和重新创建“已发送消息”的 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);
于 2014-05-28T08:51:00.027 回答