contenteditable選択されたテキスト保存と復元

Question

私はコンテンツ編集可能なdivから選択したテキストを保存し復元する方法について2つの機能を示すこの記事を見に行きました。私はcontenteditableとして設定された下のdivと、もう一方の投稿からの2つの関数を持っています。これらの機能を使用して、選択したテキストを保存および復元する方法。

<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div> 

<script> 
function saveSelection() { 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      return sel.getRangeAt(0); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     return document.selection.createRange(); 
    } 
    return null; 
} 

function restoreSelection(range) { 
    if (range) { 
     if (window.getSelection) { 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.selection && range.select) { 
      range.select(); 
     } 
    } 
} 
</script> 

Answer 1

典型的な使用は、ユーザからの入力を受け入れるようにウィジェットまたはダイアログのいくつかの種類を表示する（従って、潜在的に元の選択を破壊する）、そのウィジェットが隠された後に選択を復元することになります。実際に関数を使用するのは非常に簡単です。最も危険なのは、すでに破壊された後に選択を保存しようとすることです。

ここに簡単な例があります。テキスト入力を表示し、編集可能な<div>の選択内容をその入力のテキストで上書きします。そこここに貼り付けるためにあまりにも多くのコードですので、ここで完全なコードです：http://www.jsfiddle.net/timdown/cCAWC/3/

エキス：

<div id="test" contenteditable="true">Some editable text</div> 
<input type="button" unselectable="on" onclick="displayTextInserter();" 
    value="Insert text"> 
<div id="textInserter"> 
    <input type="text" id="textToInsert"> 
    <input type="button" onclick="insertText()" value="Insert"> 
</div> 

<script type="text/javascript"> 
var selRange; 

function displayTextInserter() { 
    selRange = saveSelection(); 
    document.getElementById("textInserter").style.display = "block"; 
    document.getElementById("textToInsert").focus(); 
}  

function insertText() { 
    var text = document.getElementById("textToInsert").value; 
    document.getElementById("textInserter").style.display = "none"; 
    restoreSelection(selRange); 
    document.getElementById("test").focus(); 
    insertTextAtCursor(text); 
} 
</script> 

Answer 2

ちょうど1つの勧告は：

それはネイティブブラウザの選択で作業するのは難しいです+のcontentEditable +ハンドルすべての異なるブラウザの側面+ゼロからの選択と等を保存して復元する..

私はお勧めしますrangyhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
特別にドキュメントをチェックします

のために選択して、すべてのハードワークを作るために行わ 、使いやすいです;） は、それが（モジラを参照してくださいあなたはRangeオブジェクトのメソッドを使用する必要があります