js contenteditable - 防止寫入新插入的元素

Question

我正在研究一種簡單的語法突出顯示器，用dom元素替換具有類的文本。

說，我有一個

<div contenteditable="true"> 
    Some text. | And some other text. 
</div> 

光標是在|管

//如果用戶鍵入foo

<div contenteditable="true"> 
    Some text. foo| And some other text. 
</div> 

//我代替它，然後將選擇插入的元素

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foo</span>| And some other text. 
</div> 

後，但如果你鍵入，你鍵入到span.....不管是什麼。

//型棒

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foobar|</span> And some other text. 
</div> 

，我不希望出現這種情況，但新插入的元素之後我不能設置選項。

<div contenteditable="true"> 
    Some text. <span class="highlight-foo">foo</span>bar| And some other text. 
</div> 

這裏，做了高亮和更換JS ..

... 
// chunk is the variable that holds foo, if we stick the the above example.. 
// select it 
range.setStart(range.startContainer, range.startOffset-chunk.length); 

// add it to the range 
sel.addRange(range); 

// replace it..then set the range to the textNode after the span 
// because after the injection selection.anchorNode is the textNode inside the span.. 
// in chrome, however, this below sets the range correctly. 
range.setStart(sel.anchorNode.parentNode.nextSibling, 0); 

// and it's all good until now, but adding the range to the selection does nothing.. 
sel.removeAllRanges(); 
sel.addRange(range) 

// the selection is still inside the span.. 

如何解決呢？我已經閱讀了很多內容，甚至在這裏看到了相當多的問題，但沒有提到這個問題。

Answer 1

我假設你在WebKit中測試這個。 WebKit的脫字符處理功能可防止將脫字符放置在文本節點的開頭：https://bugs.webkit.org/show_bug.cgi?id=23189。在Firefox中，你的代碼應該沒問題。

解決方法都很糟糕。一種是插入一個零寬度空間（如\u200B）並選擇它，但是然後添加特殊代碼來處理箭頭鍵和代碼以刪除零寬度空間。

更新

另一個解決辦法是使用的WebKit有鏈接特殊情況下它會強制插入符號鏈接後去的事實：

http://jsfiddle.net/RfMju/

所以盡你所能做，這是不愉快，但可行的是，當你想要脫字符進入突出顯示的元素內部並將其改變爲鏈接時，使用<span>。