ajax 게시 후 ckeditor 메시지를 표시하는 방법

Question

ajax를 통해 데이터를 저장하는 사용자 정의 ckeditor 4.0 플러그인이 있습니다. 데이터를 저장 한 후 서버 응답과 함께 ckeditor 대화 상자를 표시하려고합니다. 내 플러그인 코드는 다음과 같습니다 CKEDITOR.plugins.add ('ajaxsave', { 초기화 : 기능 (에디터) {

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

내 저장 내용입니다. 나는 경고 대신 페이딩 메시지를하는 방법을 이해하고 싶다. 키가 jQuery.ajax success 핸들러 반품 defered 개체의 done 방법 중 하나 내 다른 숨겨진 요소 (아마 사업부)를 보여주고있다

(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

(그래서 그것이 작동하는 희망 전에 코드를 게시되지 않습니다). 다음

<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를 사용하여 :

우리는 다음과 같은 마크 업 사업부가 가정 (사업부 다른 모든 요소 위에 앉아 할 수 있습니다 position:absolute주의) 방법

$.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 업데이트를 게시 할 때마다 "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);