Bir DOM öğesinden sonra seçimi taşı

Question

Şu anda web için bir Markdown düzenleyicisi hazırlıyorum. Markdown etiketleri, HTML eşdeğerlerini Range arabirimiyle ekleyerek gerçek zamanlı olarak önizlenir. kodunu takiben çalışma MDN'yi göre olması gereken kullanılır:

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 çalışır: Bazı kalın metin

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

Krom değil: Bazı kalın yazı

Herhangi bir öneride sorun ne olabilir? Bu konudaki bilgiler nadirdir.

---

Cevap

sayesinde Aşağı @Tim için, onun sözü halkalarından biri cevaptır içinde açıklanır görünmez karakter geçici çözümü kullanarak düzelttim.

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

sorun WebKit şapka (veya bir seçim sınır) gitmek yerler hakkında fikir sabit olmasıdır ve Görüşme sırasında aralığının değiştirilmiş versiyonu seçmektir: Şu ana kullanıyorum kodudur seçimin addRange() yöntemi. Bunu Stack Overflow üzerinde birkaç kez yazdım;

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