在DOM元素之后移动选区
我目前正在为网络构建一个Markdown编辑器。 Markdown标签可以通过Range界面附加HTML代码实时预览。 以下代码被使用,应该按照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)
问题在于WebKit已经修正了插入符号(或选择边界)的位置,并且在调用选择的addRange()
方法时选择了范围的修改版本。 我已经在Stack Overflow上写过几次了; 这里有几个例子: