2013-10-10 38 views
7

Attualmente sto creando un editor Markdown per il web. I tag Markdown sono visualizzati in anteprima in tempo reale aggiungendo i loro equivalenti HTML tramite l'interfaccia Range. A seguito di codice viene utilizzato, che dovrebbe essere di lavoro in base alle MDN:Sposta la selezione dopo un elemento DOM

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 funziona: Alcuni grassetto testo

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

non Chrome: Alcuni testo in grassetto

enter image description here

Qualche suggerimento cosa potrebbe essere sbagliato? Le informazioni su questo argomento sono rare.


risposta

Grazie a @ Tim giù, ho riparato utilizzando la soluzione personaggio invisibile egli descrive in uno dei link di cui è la risposta. Questo è il codice che sto usando ora:

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) 

risposta

3

Il problema è che WebKit ha fissato idee su dove il cursore (o un bordo di selezione) possono andare e sta selezionando una versione modificata della vostra gamma quando si chiama la selezione del metodo addRange(). Ne ho scritto alcune volte su Stack Overflow; qui ci sono un paio di esempi:

+0

La vostra [Rangy] (https://code.google.com/p/rangy/) risolvere questo problema? –

+0

@ ream88: Purtroppo no. Non c'è davvero una soluzione, solo brutte soluzioni. –

+0

Risolto il problema, usando la soluzione alternativa di char invisibile. Grazie mille, speriamo che queste incongruenze vengano risolte un giorno. –

Problemi correlati