Ckeditor перетащить файлы txt

Question

У меня есть следующее, которое работает в обычной текстовой области, как только текстовое поле превращается в экземпляр CKEditor, оно больше не работает, я предполагаю, что Dyanmic создает CKEditor, так что это возможно для достижения этой цели?

<textarea id="drop_zone">Drop files here</textarea> 


    <script> 
     CKEDITOR.replace('editor1'); 
    </script> 

<script> 
function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 
    var reader = new FileReader(); 
    reader.onload = function(event) {    
     document.getElementById('drop_zone').value = event.target.result; 
    }   
    reader.readAsText(files[0],"UTF-8"); 
} 

function handleDragOver(evt) { 
evt.stopPropagation(); 
evt.preventDefault(); 
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
} 

// Setup the dnd listeners. 
var dropZone = document.getElementById('drop_zone'); 
dropZone.addEventListener('dragover', handleDragOver, false); 
dropZone.addEventListener('drop', handleFileSelect, false); 
</script> 

Answer 1

A textarea не включен в экземпляр CKEditor. Ни CKEditor не заменяет textarea. Редактор находится рядом с textarea в DOM.

Так следующее неверного предположения

, как только текстовое поле не будет включено в экземпляр CKEditor он больше не работает

является корнем проблемы, потому что, когда вы звоните CKEDITOR.replace(idOfTextarea), CKEditor шкуры <textarea> в DOM и создает структуру редактора рядом с ним (проверьте DOM с помощью devtools, чтобы увидеть его). В результате, все слушатели, как

var dropZone = document.getElementById('drop_zone'); 
dropZone.addEventListener('dragover', handleDragOver, false); 
dropZone.addEventListener('drop', handleFileSelect, false); 

теряют смысл, потому что они привязаны к <textarea>, который скрыт в то время как вы удаляете файл в CKEditor, что совершенно разные вещи в DOM.

Есть official sample об общем перетаскивании & Загрузка с друзьями и удалением. Вы также можете использовать редактор API (editor#paste событий), чтобы на что-то вроде этого

var editor = CKEDITOR.replace('editor1'); 

editor.on('paste', function(evt) { 
    var reader = new FileReader(); 

    reader.onload = function(event) { 
     editor.insertText(event.target.result); 
    } 

    reader.readAsText(evt.data.dataTransfer.getFile(0), "UTF-8"); 
}); 

просто убедитесь, что вы используете последнюю CKEditor 4.x.