contenteditable 요소 안에 span 요소 안에 캐럿 배치하기

Question

텍스트 편집기를 개발 중입니다. 콘텐츠를 편집 할 수있는 <div>이 있으며 그 안에 실제 스타일 속성이있는 <span> 요소가 배치됩니다. 이제 스팬 요소 안에 캐럿을 배치하는 방법을 알고 있지만 일단 입력하기 시작하면 div 자체 내부의 텍스트가 스팬 외부로 인쇄됩니다.

여기에 캐럿 위치에 대한 관련 코드입니다 :

rs[ 0 ] 현재 스팬 요소입니다

var rs = $("#textEntry").insert("span").set("style" , style); 

      sel = window.getSelection(); 

      sel.collapse(rs[ 0 ] , 0); 

      rs[ 0 ].focus(); 

.

어떻게하면이 문제를 해결할 수 있습니까?

P. $은 jQuery가 아닙니다. 다음 텍스트 노드 인 요소의 첫 번째 자식에 캐럿을 설정 몇 가지 내부 텍스트를 추가 할 필요가 있었다

다음을 제거합니다

Answer 1

이 함께 연주 한 후, 다음과 같이의 해결책이 보인다 본문. 캐럿은 그 위치에 머무를 것이고 짜잔! 그것은 작동합니다.

var rs = $("#textEntry").insert("span").set("style" , style).html("a"); 

rs[ 0 ].focus(); 
if (document.selection) { 
    sel = document.selection.createRange(); 
    sel.moveStart('character' , 0); 
    sel.select(); 
} 
else{ 
    sel = window.getSelection(); 
    sel.collapse(rs[ 0 ].firstChild , 0); 
} 

rs.html("" , true); 

나는 다른 솔루션을보고 기뻐할 것입니다.