Ckeditor拖放txt文件

我有以下工作在正常的文本區域，一旦textarea變成CKEditor實例，它不再起作用我承擔CKEditor的dyanmic創建，所以有可能爲了達成這個？Ckeditor拖放txt文件

<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>

來源

2016-01-20 Philwn

A textarea沒有變成CKEditor實例。 CKEditor都不能替代textarea。編輯器位於DOM中的textarea旁邊。

所以下面的錯誤的假設

只要textarea裏變成了CKEditor的情況下就不再起作用

是問題的根源，因爲當你調用CKEDITOR.replace(idOfTextarea)，CKEditor的皮在DOM中使用<textarea>，並在其旁邊創建編輯器結構（使用devtools檢查DOM以查看它）。因爲它們所連接，而你拖放文件到CKEditor的，這是在DOM完全不同的東西這是隱藏在<textarea>其結果是，所有的樣

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

聽衆失去了意義。

有一個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"); 
});

只是確保你使用最新的4.x版的CKEditor

來源

2016-01-21 12:23:55 oleq

這個作品非常出色謝謝你，但是我的一些文件有德文字符。我認爲UTF-8會避免這種情況。他們被放置在ckeditor as – Philwn

@Philwn可能重複http://stackoverflow.com/questions/30443080/javascript-filereader-readastext-function-not-understaning-utf-8-encoding-charac?lq=1 – oleq

Ckeditor拖放txt文件

回答

相關問題