將外部對象拖放到CKEditor中

Question

我在CKEitor 4.5中看到有一個新的拖放系統。我想將外部DIV或SPAN放到我的CkEditor中，並將它們變成「佔位符」，「假對象」或「受保護的源」對象。即，被刪除的對象應該變成與內容相關的任意HTML。

可用的演示似乎是關於上傳內容，但這是不同的，我會很感激演示...

Answer 1

是的，這是可能的。 CKEditor 4.5目前處於測試階段，這意味着目前還沒有教程，但這裏是示例如何操作。

首先，您需要在dragstart上標記您的數據。你可以簡單的設置text：

dragstart(evt) { 
    evt.dataTransfer.setData('text', 'foo'); 
}); 

但你需要讓你的文本唯一的，否則每次有人跌落foo將被識別爲你的容器。

我更喜歡使用CKEditor的數據傳輸門面，讓您在每一個瀏覽器（包括IE 8+）使用自定義數據類型：在CKEDITOR

dragstart(evt) { 
    var evt = { data: { $: $evt } }; // Create CKEditor event. 

    CKEDITOR.plugins.clipboard.initDragDataTransfer(evt); 
    evt.data.dataTransfer.setData('mydatatype', true); 

    // Some text need to be set, otherwise drop event will not be fired. 
    evt.data.dataTransfer.setData('text', 'x'); 
}); 

然後你就可以識別這些數據，並設置你的HTML被丟棄。無論您需要什麼，您都可以替換丟棄的內容。簡單的設置text/html數據的drop事件：

editor.on('drop', function(evt) { 
    var dataTransfer = evt.data.dataTransfer; 

    if (dataTransfer.getData('mydatatype')) { 
    dataTransfer.setData('text/html', '<div>Bar</div>'); 
    } 
}); 

你能找到工作的樣品在這裏：http://jsfiddle.net/oqzy8dog/3/