나는 Ace이 어떻게 작동하는지 꽤 흥미 롭습니다.에이스에서 커서는 어떻게 작동합니까
커서가 divs/span의 각 문자 사이를 클릭하거나 화살표 키를 눌러 이동할 수 있는지 궁금합니다.
가 나는 또한 당신이 그것을 선택하면 텍스트에 하이라이트가 어떻게 작동하는지에 관심 있어요 사람이이 문제에 도움이 되거 수 있다면
는 감사하겠습니다 (이러한 종류의 demo에 회색집니다).
미리 감사드립니다.
데모 페이지를 검사하고 화살표 키를 눌러 커서를 이동하면 커서 div의 style.left 속성이 알맞은 방향으로 7px 씩 이동합니다. 위아래로는 텍스트를 표시하는 데 사용되는 범위의 정확한 크기 인 15px입니다.
선택을 위해 클래스 이름이 ace_selection 인 div를 사용하고 절대 위치로 배치합니다.
크롬 또는 파이어 폭스로 데모를 살펴보고 자세히 살펴 보시기 바랍니다. 그들이 새로운 div를 만드는 방법을보고 div의 속성을 취할 때마다 수정할 수 있습니다.
Ace에서는 기본적으로 DOM을 드로잉 API로 취급합니다. 여러분이 보는 모든 것은 절대적으로 배치 된 DIV와 SPAN 요소를 사용하여 "그려진"것입니다. 텍스트는 SPAN을 사용하여 그려지며, 줄 (예 : 커서 또는 선택 사항)은 DIV 등입니다.
모든 것을 올바르게 배치하려면 먼저 문자의 높이와 너비를 측정해야합니다. 그 이유는 에이스가 모노 간격 글꼴로만 작동하기 때문입니다.
에이스 내부를 클릭하면 getBoundingClientRect을 사용하여 편집기 내에서 마우스의 상대 위치를 계산 한 다음 측정 된 문자 크기를 사용하여 문자 위치로 변환합니다. 키보드로 탐색하는 것은 비슷합니다.
인도 언어 타밀어의 UTF-8 문자로 작동하도록 ACE를 사용자 정의했습니다. 문자에 여러 글자 기호가 있으며이 커서 포인트 오프셋 문제가 악화됩니다. – Arcturus