내부 HTML이 변경될 때 HTML 콘텐츠 편집 가능에서 캐럿 위치 유지

Question

WYSIWYG 편집기 역할을 하는 div가 있습니다. 텍스트 상자 역할을 하지만 그 안에 Markdown 구문을 렌더링하여 실시간 변경 사항을 표시합니다.

문제: 문자를 입력할 때 캐럿 위치가 div의 시작 부분으로 재설정됩니다.

으아아아 으아아아 으아아아

Codepen: https://codepen.io/ADAMJR/pen/MWvPebK

QuillJS와 같은 마크다운 편집기는 상위 요소를 편집하지 않고도 하위 요소를 편집할 수 있는 것 같습니다. 이렇게 하면 문제가 방지되지만 이제 이 설정을 사용하여 해당 논리를 재현하는 방법을 확신하게 되었습니다.

Question: 입력하는 동안 캐럿 위치가 재설정되는 것을 방지하는 방법은 무엇입니까?

업데이트: 각 입력의 div 끝 부분에 캐럿 위치를 보냈습니다. 그러나 이는 여전히 본질적으로 위치를 재설정합니다. https://codepen.io/ADAMJR/pen/KKvGNbY

Answer 1

대부분의 리치 텍스트 편집기가 하는 일은 자체 내부 상태를 유지하고, 주요 이벤트에 대해 업데이트하고, 사용자 정의 시각적 레이어를 렌더링하는 것입니다. 예:

으아악 으아악 으아악

Answer 2

먼저 커서 위치를 가져온 다음 내용을 처리하고 설정해야 합니다. 그런 다음 커서 위치를 복원합니다.

중첩된 요소가 있는 경우 커서 위치를 복원하는 것은 까다로운 부분입니다. 또한 매번 새로운 和 요소를 생성하고 이전 요소는 폐기됩니다.

으아악 으아악 으아악