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が動作します：いくつかの太字テキスト

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

クロームない：一部の太字

を

何が間違っている可能性がありますか？この件に関する情報はまれです。 @Tim下へ

---

回答

おかげで、私は彼が答えであるに言及リンクのいずれかで記述し、不可視文字の回避策を使用して、それを修正しました。

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で数回書いた。

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