私のプロジェクトは、C++ Web ベースの IDE のようなもので、テキスト ファイルを開き、テキストをcontenteditable div
. choose file button
したいをクリックすると
クリップボードのコピーと同じように、選択したテキスト ファイルの内容を取得する
貼り付けと同じように、コピーしたテキストを contenteditable div に追加します
setCaret
contenteditable divの先頭にキャレット位置を設定する2.1提供関数2.2
pasteTextAtCaret
現在のキャレット位置からイベントの貼り付けを開始する機能を提供
このイベントはコードにエラーを発生させず、デバッグの時間を節約するため、コピー アンド ペースト イベントのように動作するようにしたいと考えています。
function readSingleFile(evt) {
var f = evt.target.files[0];
console.log(f);
if (!f) {
alert("Failed to load file");
return;
}
if (f.name.indexOf('.txt') == -1) {
alert(f.name + " is not a valid text file.");
return;
}
var r = new FileReader();
r.onload = function(e) {
setCaret(false, 0);
//copy here
pasteTextAtCaret(copied_text);
}
r.readAsText(f);
}
function setCaret(colPosition, divPos) {
alert('calllled');
var range = document.createRange();
var sel = window.getSelection();
range.selectNodeContents($('#board')[divPos]);
range.collapse(colPosition);
sel.removeAllRanges();
sel.addRange(range);//setting the caret position
}
function pasteTextAtCaret(text) {
alert('pasted');
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range = range.cloneRange();
range.setStartAfter(textNode);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}//if
}//if
else if (document.selection && document.selection.type != "Control") {
document.selection.createRange().text = text;
}//else if
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);