codepen, codecademy 및 google 문서와 같은 웹 사이트에서 텍스트 입력이 어떻게 작동합니까?

Question

그들은 편집 가능하지만 사용자 지정 강조 표시가 있습니다.

그들은 textarea를 사용하고 있지 않습니다. 그들은 분명히 텍스트 였어야하는 장소에 요소를 넣고 있습니다. 거기에 뭔가 그런 것을 구축하고 커서가 어디로 갈 것인지 등을 파악하는 방법을 보여주는 가이드가 있습니까?

reddit 다음으로 인기있는 사이트는 실제로 기본 HTML 텍스트 영역 요소를 사용합니다.

대부분 사용자 지정 강조 표시와 모든 종류의 작업이 진행되며, 사용자가 직접 편집하는 모양을 제공하는 html을 생성하지만 자바 스크립트는 텍스트 영역/텍스트 입력을 모방합니다.

Answer 1

Codepen이 CodeMirror : https://github.com/codemirror/codemirror을 사용하는 것 같습니다. 코드 편집기를 표시 할 수있는 무료 오픈 소스 라이브러리입니다.

일반적인 아이디어는 모든 마우스 클릭 (javascript get x and y coordinates on mouse click)에서 모든 마우스 위치를 감지하여 가짜 커서를 표시하거나 숨기는 것입니다. 커서가 놓이면 모든 키를 감지하여 수행 할 작업을 결정합니다.

복잡한 자바 스크립트를 사용하는 대신 HTML의 contenteditable 속성을 사용합니다. 이러한 div 내부의 내용은 CSS로 스타일이 가능하며 조작이 쉬운 일반적인 JavaScript로 편집 할 수 있습니다. 이것은 페이스 북이 자신의 입력을 만드는 방법은 다음과 같습니다