Перетащите внешний объект в CKEditor

Question

Я вижу, что в CKEitor 4.5 есть новая система перетаскивания. Я хотел бы отбросить внешние DIV или SPAN в свой CkEditor и превратить их в объекты «поддельные объекты» или «защищенные исходные объекты». I.e., упавший объект должен превратиться в произвольный HTML, связанный с контентом.

Имеющаяся демоса, кажется, о загрузке контента, но это совсем другое, и я оценил бы демку ...

Answer 1

Да, это возможно. CKEditor 4.5 находится в бета-фазе на данный момент, что означает, что пока нет учебников, но вот пример того, как это сделать.

Прежде всего, вы должны пометить свои данные на dragstart. Вы можете просто набор text:

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

Но тогда вы должны сделать свой текст уникальным, в противном случае каждый раз, когда кто-то падение foo будет признать в качестве контейнера.

Я предпочитаю использовать CKEditor фасад передачи данных, которые позволяют использовать пользовательский тип данных в любом браузере (включая IE 8+):

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'); 
}); 

Тогда в CKEditor вы можете распознать эти данные и установить HTML для удаления. Вы можете заменить упавшее содержимое, независимо от того, что вам нужно. Простой набор text/html данные в случае падения:

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/