CKEditor的drop事件不被解僱

Question

我能夠獲得基本的使用JavaScript和HTML解僱drop事件：

<div class="drop" style="width: 200px; height: 200px; background: red;"></div> 
<a href="#" title="Drag Me">Drag Me</a> 

<script> 
    $('.drop').on('dragenter',function(e){ 
     e.preventDefault(); 
    }) 
    $('.drop').on('dragover',function(e){ 
     e.preventDefault(); 
    }) 
    $('.drop').on('drop dragdrop',function(){ 
     console.log("Element was dropped"); 
    }); 
</script> 

上述作品完美的罰款。然而，當我把一個鏈接在CKEditor的對象涵蓋textarea的領域，絕對沒有任何反應：

$(document).ready(function(){ 
     var ckeditor = CKEDITOR.instances.quickdoc_editor; 
     console.log(ckeditor); 
     ckeditor.on('dragenter',function(e){ 
      e.preventDefault(); 
     }) 
     ckeditor.on('dragover',function(e){ 
      e.preventDefault(); 
     }) 
     ckeditor.on('drop dragdrop',function(){ 
      console.log("Element was dropped"); 
     }); 
    }) 

這是在控制檯輸出的CKEditor的對象：

a {element: CKEDITOR.dom.element, elementMode: 1, name: "quickdoc_editor", _: Object, commands: Object…}_: ObjectactiveEnterMode: 1activeFilter: CKEDITOR.filteractiveShiftEnterMode: 2addMenuGroup: function (b,a){m[b]=a||100}addMenuItem: function (a,c){m[c.group]&&(l[a]=new CKEDITOR.menuItem(this,a,c))}addMenuItems: function (a){for(var c in a)this.addMenuItem(c,a[c])}blockless: falsecommands: Objectconfig: dcontainer: CKEDITOR.dom.elementcontextMenu: CKEDITOR.plugins.contextMenu.CKEDITOR.tools.createClass.$dataProcessor: CKEDITOR.htmlDataProcessordocument: CKEDITOR.dom.documentelement: CKEDITOR.dom.elementelementMode: 1enterMode: 1filter: CKEDITOR.filterfocusManager: CKEDITOR.focusManagergetClipboardData: function (a,d){function c(a){a.removeListener();a.cancel();d(a.data)}function j(a){a.removeListener();a.cancel();i=!0;d({type:f,dataValue:a.data})}function l(){this.customTitle=a&&a.title}var g=!1,f="auto",i=!1;d||(d=a,a=null);b.on("paste",c,null,null,0);b.on("beforePaste",function(a){a.removeListener();g=true;f=a.data.type},getColorFromDialog: function (c,f){var d=function(a){this.removeListener("ok",d);this.removeListener("cancel",d);a="ok"==a.name?this.getValueOf("picker","selectedColor"):null;c.call(f,a)},e=function(a){a.on("ok",d);a.on("cancel",d)};b.execCommand("colordialog");if(b._.storedDialogs&&getMenuItem: function (a){return l[a]}id: "cke_1"instanceReady: truekeystrokeHandler: CKEDITOR.keystrokeHandlerlang: dlangCode: "en"loaded: truemode: "wysiwyg"name: "quickdoc_editor"plugins: ObjectreadOnly: falseremoveMenuItem: function (a){delete l[a]}resetUndo: function(){b.reset();a.fire("saveSnapshot")}shiftEnterMode: 2status: "ready"tabIndex: 0templates: Objecttitle: "Rich Text Editor, quickdoc_editor"toolbar: Array[15]toolbox: uui: CKEDITOR.uiundoManager: gwindow: CKEDITOR.dom.window__proto__: CKEDITOR.editor.CKEDITOR.editor 

什麼可能我是做錯了什麼？

更新：

我能夠得到dragenter和dragover工作。但仍然下降，dragdrop什麼都不做：

$(document).ready(function(){ 
     CKEDITOR.on('instanceReady', function (ev) { 

      console.log(ev.editor); 
      console.log(ev.editor.document); 

      ev.editor.document.on('dragenter',function(ev){ 
       console.log("Yep we get here") 
       ev.data.preventDefault(true); 
      }) 

      ev.editor.document.on('dragover',function(ev){ 
       console.log("Yep we get here too") 
       ev.data.preventDefault(true); 
      }) 
      ev.editor.document.on('drop dragdrop',function(){ 
       console.log("Element was dropped"); 
      }); 
     }); 


    }) 

Answer 1

終於得到它的工作。丟棄事件被識別，但沒有拖動。後者不會被解僱。

$(document).ready(function(){ 
     CKEDITOR.on('instanceReady', function (ev) { 

      ev.editor.document.on('drop',function(){ 
       console.log("Element was dropped"); 
      }); 

      ev.editor.document.on('dragenter',function(ev){ 
      // ev.data.preventDefault(true); 
      }) 

      ev.editor.document.on('dragover',function(ev){ 
      // ev.data.preventDefault(true); 
      }) 
     }); 


    })