設置選擇開始和結束在一個contentedible

Question

我試圖爲使用基於語法的格式的網頁創建一個JavaScript編輯器。它使用onkeyup完全取代<pre>標籤的innerHTML。但是，這會導致插入符號被移到編輯的開頭。

我能找到的唯一解決方案是在更改前獲取選擇開始和結束的偏移量，然後在最後設置它們。我對獲得選擇開始和結束碼從https://stackoverflow.com/a/4812022/2093695修改：

var selStart, selEnd; 
if (typeof window.getSelection != "undefined") { 
    var range = window.getSelection().getRangeAt(0); 
    var preCaretRange = range.cloneRange(); 
    preCaretRange.selectNodeContents(editor); 
    preCaretRange.setEnd(range.endContainer, range.endOffset); 
    selStart = preCaretRange.toString().length; 
    selEnd = selStart + range.toString().length; 
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") { 
    var textRange = document.selection.createRange(); 
    var preCaretTextRange = document.body.createTextRange(); 
    preCaretTextRange.moveToElementText(editor); 
    preCaretTextRange.setEndPoint("EndToEnd", textRange); 
    selStart = preCaretTextRange.text.length; 
    selEnd = selStart + textRange.text.length; 
} else selStart = 0; 

這部分工作正常，在Firefox中，至少。我的問題是設置的選擇。什麼是我到目前爲止如下：

// restore selection 
if (selStart) { 
    if (range) { 
     range = window.getSelection().getRangeAt(0); 
     range.setStart(editor,selStart); 
     range.setEnd(editor,selEnd); 
     // Doesn't work, in FF at least 
     // Behavior: when there are no tags, 
     //  for 0, caret set at beginning 
     //  for 1, caret set at end 
     //  for anything greater, "IndexSizeError: Index or size is negative or greater than the allowed amount" 
     // when the editor contains tags, 
     //  for 0, caret set at beginning of editor 
     //  for 1, caret set at beginning of first tag (unless same as start of editor) 
     //  for 2, caret set at end of first tag 
     //  for 3, caret set at beginning of second tag 
     //  for 4, caret set at end of second tag, and so on 
     //  for a number that is 1 greater than whatever number would set the caret at the end of the last tag, caret set at end of editor 
     //  for a number greater than that, same error as before 
    } else if (document.selection && document.selection.createRange) { 
     // Not sure what to do here 
    } 
} 

那是多麼setStart和setEnd都應該工作？我究竟做錯了什麼？有沒有更好的方法來設置選擇的開始和結束，最好是不使用庫？

Answer 1

我已經發布了幾個不同的功能。我無法找到我最近的一個，但下面有包含restoreSelection()功能，應該是有幫助的鏈接的jsfiddle：

https://stackoverflow.com/a/7404126/96100

更新：我發現這個代碼的我更近的版本。它應該工作相同，但內部更優雅一些。

https://stackoverflow.com/a/13950376/96100