我目前正在为网络构建一个 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 工作:一些粗体文本
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)