9
정말 대단한 UI 기능입니다. 특정 단추가 없으면 클릭하여 목록을 편집 할 수 있습니다. 링크와 태그가 강조된 큰 편집기 편집기처럼 보입니다. 그들은 어떤 기술을 사용하고 있습니까? 편집을 위해 포커스를 감시하고 텍스트 영역을위한 contenteditable?워크 플로가 인라인 편집을 어떻게 구현합니까?
A
답변
27
저는 WorkFlowy를 구축 한 두 사람 중 한 사람입니다. 페이지를 마우스로 움직이면 언제든지 마우스를 올려 놓고있는 항목의 텍스트 위에 위치하는 opacity:0 텍스트 영역을 갖게됩니다. 기본 콘텐츠와 완전히 동일한 콘텐츠 및 형식을가집니다.
클릭하면 텍스트 영역에 초점이 맞춰지고 opacity:1으로 만들고 내용은 opacity:0과 유사합니다. 그런 다음 입력 할 때 텍스트 영역과 대상 내용간에 내용을 동기화합니다. 앞으로는 완전히 보이지 않는 텍스트 영역으로 이동할 것입니다. 그러면 리치 텍스트 편집이 가능해집니다. 이것이 HTML 기반 IDE의 많은 부분입니다.
Workflowy는 실제로 작동하는 것을 보려면 사용자 계정이 필요합니다. –