javascript - DOM 要素の後に選択を移動する

Question

現在、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) 

Answer 1

問題は、WebKit がキャレット (または選択境界) がどこに移動できるかについて固定されたアイデアを持っており、選択のaddRange()メソッドを呼び出すときに範囲の修正バージョンを選択していることです。これについては、Stack Overflow で何度か書いています。いくつかの例を次に示します。

• contenteditable div内のスパン要素の後にカーソルを設定します
• contenteditable div で 2 つの div の間にキャレット/カーソル位置を設定する方法。