現在、Web 用の 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 のおかげで、回答で言及されているリンクの 1 つで彼が説明している見えない文字の回避策を使用して修正しました。これは私が今使っているコードです:
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)