在DOM元素之后移动选择

Question

我目前正在为网络构建Markdown编辑器。通过Range界面附加HTML等价物，实时预览Markdown标签。使用以下代码，该代码应根据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可以运行：一些粗体文字

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

Chrome不是：一些粗体文字

有什么建议可能有什么不对吗？关于这个主题的信息很少见。

---

答案

感谢@Tim Down，我使用他在回答中提到的一个链接中描述的隐形字符解决方法修复了它。这是我现在使用的代码：

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

问题在于，当您调用选择的addRange()方法时，WebKit已经确定了插入符号（或选择边界）的位置，并且正在选择范围的修正版本。我已经在Stack Overflow上写了几次这个;这里有几个例子：

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