Question

我有以下工作在普通文本区域，只要textarea被转换为CKEditor实例它就不再起作用我假设为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

textarea未转换为CKEditor实例。 CKEditor都不替换textarea。编辑器位于DOM中的textarea旁边。

所以以下错误的假设

只要将textarea转换为CKEditor实例，它就不再有效

是问题的根源，因为当您调用CKEDITOR.replace( idOfTextarea )时，CKEditor会在DOM中隐藏<textarea>并在其旁边创建编辑器结构（使用devtools检查DOM以查看它）。结果，所有的听众都喜欢

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。

Ckeditor拖放txt文件

1 个答案: