CKEditor 4 Widget with Draggable contents

我正在試圖製作一個CKEditor小部件，用於收聽dragstartdrag和dragend事件。問題在於這些事件永遠不會被解僱 - 就像.cke_widget_wrapper（包裹小部件的div）取消這些事件。CKEditor 4 Widget with Draggable contents

請注意，我並不是試圖讓整個小部件可拖動（小部件功能的一部分），而是使小部件內的元素可拖動。

如果我打開.cke_widget_wrapper的孩子（從而刪除包裝），那麼一切都按預期工作。但看起來這個包裝阻止了孩子的拖拽。

我不會發布關於如何進行拖動的代碼，因爲它在單獨的測試用例中按預期方式工作，並且如同解釋的那樣，當我從.cke_widget_wrapper中解開窗口小部件時，該工作方式起作用。

下面是我如何創建一個構件：

CKEDITOR.plugins.add('embed', { 
    init: function(editor) { 
     editor.widgets.add('gallery', { 
      init: function() { 
       // code here that generates the HTML 
      }, 
      upcast: function(element) { 
       // Defines which elements will become widgets. 
       if (element.hasClass('gallery')) { 
        return true; 
       } 
      }, 
      downcast: function(element) { 
       element.setHtml(""); 
      }, 
      draggable: false, // This does not make a difference, but I set it to false because I don't want to use the built in widget dragging functionality 
      template: "<div class="gallery" trix-id='{id}'></div>", 
      defaults: function() { 
       return {id: 1} // As an example 
      } 
     }); 
    } 
});

這裏是生成的HTML：

<div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_selected" data-cke-display-name="gallery" data-cke-widget-id="0"> 
    <div class="gallery cke_widget_element" trix-id="1" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="gallery"> 
     <!-- Other HTML --> 
     <div class="resize" draggable="true" trix-gallery-resize="1"></div> 
    </div> 
</div>

的div.resize元素具有連接到它允許拖動事件處理程序。如前所述，這個工作在一個孤立的測試案例中，當我刪除.cke_widget_wrapper包裝。

有誰知道我如何允許在窗口小部件中拖動，以便事件處理程序在.resize元素上正常運行？

感謝

來源

2016-01-08 Michael Bates

像往常一樣，只要我發佈問題所以我工作了答案。

CKEditor將mousedown事件附加到可編輯區域，該區域執行許多操作，但似乎其中一個副作用是阻止小部件內容被拖動。

我所要做的就是附加一個mousedown事件處理程序.resize元素這就要求event.stopPropagation，就像這樣：

element.on('mousedown', function(e) { 
    e.stopPropagation(); 
});

輕鬆！

來源

2016-01-08 04:50:07

我有一個插件可以附加html5視頻標籤，我怎樣才能在這裏獲得您的體驗優勢。 –

CKEditor 4 Widget with Draggable contents

回答

相關問題