contentEditable div에 대해 캐럿 위치를 얻는 방법?

Question

나는 내 블로깅 웹 사이트의 텍스트 편집기를 만들고 있습니다. 사용자에게 텍스트를 선택하고 선택한 텍스트를 굵게 또는 기울임 꼴로 표시하거나 선택한 텍스트에 일부 색상을 지정하는 것과 같은 스타일을 적용하여 블로그 게시물을 편집 할 수있는 작은 도구 상자를 제공하려고합니다. 이미지 및 비디오 링크 삽입 옵션.

나는 SO를 검색했지만 만족할만한 해결책을 얻을 수 없었다.

누구든지 선택을위한 (또는 선택없이) 캐럿 위치를 찾는 것을 도울 수 있다면 좋을 것입니다. jQuery 캐럿 플러그인을 시도했지만 작동하지 않습니다.

내 코드 (SO에서만 게시물을 읽는이에 도착) 다음과 같습니다

HTML : 별도의 JS 파일에서

<div id="editor" contentEditable="true"> 
    Initial text... 
</div> 

: 나는 점점 오전

(function(){ 
$("#editor").bind("keydown keypress mousemove", function() { 
     alert("Current position: " + $(this).caret().start); 
    }); 
}()); 

페이지가로드되고 키 누르거나 이벤트에 아무런 반응이 없을 때 다음과 같은 오류가 발생합니다 :

it

f.value 정의되지 말한다 또한

this link을 시도했지만 원래 DIV 안에 다른 태그가있는 경우 여기에 제공된 솔루션 못해 작동합니다.

도와주세요. 또한 좀 더 나은 해결책이나 완전히 다른 접근법을 가지고 있다면, 저를 안내하십시오.

Answer 1

jQuery 캐럿 플러그인 (나는 this one이라고 가정)은 텍스트 입력 및 텍스트 영역에만 해당됩니다. contenteditable 요소는 매우 다르게 작동하므로 그것이 작동하지 않는 이유입니다.

문자 오프셋과 관련하여 캐럿 위치 나 선택을 원할 경우 my answer here이 도움이 될 수 있습니다. 일반적으로 수행하려고하는 것처럼 들리지만이 수치는별로 도움이되지 않습니다. 너는 document.execCommand()을 볼 필요가있는 것처럼 나에게 들린다.