DOM 요소 뒤에 선택 이동

Question

현재 웹용 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) 

---

파이어 폭스 작동 : 일부 굵은 텍스트

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

크롬하지 : 일부 굵은 텍스트

어떤 제안이 잘못되었을 수 있습니까? 이 주제에 관한 정보는 거의 없습니다.

---

대답

덕분에 다운 @ 팀, 나는 그가에서 언급 한 링크 중 하나는 대답에 대해 설명 보이지 않는 문자 해결 방법을 사용하여 고정.

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

문제는 웹킷은 캐럿 (또는 선택 경계선이) 갈 수있는 위치에 대한 아이디어를 해결했다고하고 당신이 전화를 할 때 범위의 수정 버전을 선택하는 것입니다 : 이것은 내가 지금 사용하고 코드입니다 선택의 addRange() 메소드. 스택 오버플로에 대해 몇 번 썼습니다.

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