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>
答
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
这个作品非常出色谢谢你,但是我的一些文件有德文字符。我认为UTF-8会避免这种情况。他们被放置在ckeditor as – Philwn
@Philwn可能重复http://*.com/questions/30443080/javascript-filereader-readastext-function-not-understaning-utf-8-encoding-charac?lq=1 – oleq