contenteditable選定的文本保存和恢復

我遇到這個帖子，顯示2如何保存和恢復從contenteditable div選定的文本功能。我將下面的div設置爲contenteditable，並將另一個帖子中的2個函數。如何使用這些功能保存和恢復選定的文本。contenteditable選定的文本保存和恢復

<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>

來源

2011-01-14 Hussein

您需要使用Range對象的方法（見Mozilla瀏覽器doc：https：//developer.mozilla.org/en/DOM/range）。基本上，一個範圍由該節點內的節點和偏移量組成。將HTML與範圍一起保存的一種方法是使用「carets」（請參閱Closure Library以獲取想法：http://closure-library.googlecode.com/svn/docs/class_goog_dom_SavedCaretRange.html）。 – yonran 2011-01-14 04:55:41

一個典型的使用將被顯示的某種插件或對話框，以接受來自用戶的輸入（從而潛在地破壞原有的選擇）和恢復選擇該小工具已被隱藏後。其實使用這些功能相當簡單;最大的危險是試圖在選擇被摧毀後保存。

下面是一個簡單的例子。它顯示一個文本輸入並使用該輸入中的文本覆蓋可編輯的<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>

來源

2011-01-14 10:25:03

+1，我一直在尋找這個解決方案。謝謝你讓我的一天。 – 2011-08-29 09:49:27

只是一個建議：

很難與本地瀏覽器選擇工作+ CONTENTEDITABLE +處理所有不同的瀏覽器方面+保存和恢復選擇等從頭開始..

我會推薦rangyhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
是專門做是爲了與選擇所有爲你努力工作

檢查文檔，很容易使用;）希望它會幫助你

來源

2013-06-27 22:33:28 Nedudi

contenteditable選定的文本保存和恢復

回答

相關問題