如何在ajax後顯示ckeditor消息

Question

我有一個自定義ckeditor 4.0插件，通過ajax保存數據，我想在保存數據後顯示一個ckeditor對話框和服務器響應。 我的插件代碼是： CKEDITOR.plugins.add（ 'ajaxsave'，{ INIT：功能（編輯）{

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處理或延遲執行對象的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); 
    }); 

實際上，我通常最終創建和recr每次發佈更新時都會吃「發送消息」的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);