Przenoszenie zaznaczenia po elemencie DOM

Question

Aktualnie buduję edytor Markdown dla sieci. Znaczniki Markdown są przeglądane w czasie rzeczywistym poprzez dołączanie ich odpowiedników HTML za pomocą interfejsu Range. Poniższy kod jest używany, co powinno działać według MDN:

var range = document.createRange() 
var selection = window.getSelection() 

range.setStart(textNode, start) 
range.setEnd(textNode, end + 2) 

surroundingElement = document.createElement('strong') 
range.surroundContents(surroundingElement) 

var cursorRange = document.createRange() 
cursorRange.setStartAfter(surroundingElement) 

selection.removeAllRanges() 
selection.addRange(cursorRange) 

---

Firefox działa: Niektóre bold tekst

http://f.cl.ly/items/093R343i23402K190k1t/firefox.gif

nie Chrome: Niektóre tekst pogrubiony

Jakieś sugestie co może być nie tak? Informacje na ten temat są rzadkie.

---

Odpowiedź

Dzięki @Tim Dół, naprawiłem go za pomocą niewidzialnej obejście znaków opisał w jednym z linków zawartych w to odpowiedź. Jest to kod używam teraz:

var range = document.createRange() 

range.setStart(textNode, start) 
range.setEnd(textNode, end + 2) 

surroundingElement = document.createElement('strong') 
range.surroundContents(surroundingElement) 

var selection = window.getSelection() 
var cursorRange = document.createRange() 

var emptyElement = document.createTextNode('\u200B') 
element[0].appendChild(emptyElement) 

cursorRange.setStartAfter(emptyElement) 

selection.removeAllRanges() 
selection.addRange(cursorRange) 

Answer 1

Problemem jest to, że WebKit ustaliła wyobrażenia o tym, gdzie daszek (lub granica wybór) może iść i wybierając zmienioną wersję swojego zakresu, gdy nazywają metoda wyboru addRange(). Pisałem o tym kilka razy w Stack Overflow; Oto kilka przykładów:

• Set cursor after span element inside contenteditable div
• How to set caret/cursor position in a contenteditable div between two divs.