innerHTML을 수정 한 후 contentEditable에 저장/복원 선택

Question

contentEditable에서 커서 위치를 가져 오거나 설정하는 것이 거의 불가능합니다. 이 정보를 알면 신경 쓰지 않습니다. 현재 선택 영역을 저장하고 div의 innerHTML을 수정 한 다음 선택 영역을 복원 할 수 있어야합니다.

나는 꿀벌을 contenteditable selected text save and restore에 제공된 답변으로 실험하고 있습니다. div에 입력 한 후 작동하지만 프로그래밍 방식으로 div의 innerHTML을 수정하면 안됩니다. 대신 restoreSelection을 호출하면 캐럿이 처음으로 이동합니다.

입력 대신 innerHTML을 수정 한 후 contentEditable에서 선택 사항을 저장/복원 할 수있는 방법에 대한 제안 사항을 보내 주시면 감사하겠습니다.

Answer 1

편집 가능한 요소의 기존 innerHTML에서 일종의 문자열 대체를 수행하는 경우 내 Rangy 라이브러리와 해당 save/restore selection 모듈을 사용할 수 있습니다. 특정 ID가있는 보이지 않는 요소를 사용하여 선택 영역의 시작과 끝 경계를 표시하므로 innerHTML에 이러한 요소가 포함되지 않으면 변경되지 않습니다.

또 다른 대안은 요소의 텍스트 노드 내 문자 인덱스를 기반으로하는 것입니다. 여기에 순진한 구현을 작성했습니다 : https://stackoverflow.com/q/5596688/96100