캔버스 요소를 텍스트 영역으로 사용하기

Question

캔버스 요소를 텍스트 영역과 같이 사용하는 방법에 대한 간단한 설명을 찾고 있습니다.

나는 Ace과 같은 프로젝트를 보았습니다. 마치 텍스트 영역 인 것처럼 그 영역에 글쓰기에 대해 어떻게 생각하는지 궁금합니다. 그냥 평범한 텍스트, 아무것도 공상 아니야.

미리 감사드립니다.

Answer 1

이전에 Ace는 Mozilla Bwriting이었던 Mozilla Skywriter였습니다.

Bespin의 코드는 실제로 파헤쳐보고 자신을 기반으로 만들면 이해하기 쉽지만 실제로는 바보 같은 일입니다. 캔버스 사양은 실제로이에 대해 특별히 조언 :

저자는 텍스트를 캔버스 요소를 사용하여 편집 컨트롤을 구현하지 않도록해야합니다. 이렇게하면 많은 수의 단점이 있습니다.

캐럿의 마우스 배치는 다시 구현되어야합니다.

캐럿의 키보드 이동은 (복수 행 텍스트 입력의 경우 행 전체에 걸쳐 가능)을 다시 구현해야합니다. 텍스트 필드의

스크롤링이어야 (수직으로 여러 입력, 횡형 라인)으로 구현.

복사하여 붙여 넣기 과 같은 기본 기능을 다시 구현해야합니다.

맞춤법 검사 과 같은 기본 기능을 다시 구현해야합니다.

드래그 앤 드롭 과 같은 기본 기능을 다시 구현해야합니다.

페이지 너비 텍스트 과 같은 기본 기능을 다시 구현해야합니다.

예 : 사용자 지정 텍스트 서비스와 같이 사용자에게 고유 한 기본 기능에는 이 다시 구현되어야합니다. 각 사용자는 다른 서비스가 설치되어있을 수 있으므로 에 가깝고 에는 과 같은 서비스가 무한대로 제공됩니다.

양방향 텍스트 편집은 이 다시 구현되어야합니다.

여러 줄 문자를 편집하려면 관련 언어에 대해 줄을 입력해야합니다.

텍스트 선택시 이 다시 구현되어야합니다.

양방향 텍스트 끌기 선택 사항을 다시 구현해야합니다.

플랫폼 고유의 키보드 단축키 을 다시 구현해야합니다.

플랫폼 고유 입력 방식 편집기 (IMEs)을 다시 구현해야합니다.

실행 취소 및 다시 실행 기능은 이 다시 구현되어야합니다.

캐럿 다음에 배율 또는 선택과 같은 접근성 기능을 다시 구현해야합니다. 이 작품의 엄청난 양이며, 저자는 가장 강력하게 입력 요소, 텍스트 영역 요소, 또는의 contentEditable 속성을 사용하는 대신 하여 어떤 일을 피하기 위해 을 권장합니다.

Answer 2

크롬으로 라이브 데모를 검사하면 div와 span을 사용하여이를 확인합니다. 깜박이는 커서는 숨겨진 것으로부터 눈으로 볼 수있는 것으로 전환되는 div입니다. 나는 그들이 이벤트의 눌려진 키를 체크하고 라인의 해당 스팬에 쓰는 것만으로 생각한다.