javascript - ckeditor拖放txt文件

Question

我有以下内容，它可以在普通文本区域中工作，一旦文本区域变成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 。编辑器位于 textarea 旁边在 DOM 中。

所以下面的假设是错误的

as soon as the textarea is turned into a CKEditor instance it no longer works

是问题的根源，因为当你调用CKEDITOR.replace( idOfTextarea )时, CKEditor 隐藏 <textarea>在 DOM 中并在其旁边创建编辑器结构(使用 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。