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

回答

相关问题