감사합니다.
어떻게 작동할 수 있을지 어떻게 생각하시나요?
아직 해결해야 할 질문이 남아있지만, 제가 가진 몇 가지 아이디어를 공유합니다:
현재 존재하는 기본 요소: 플레이스홀더. 하지만 지금은 '전체 또는 아무것도 아닌(all or nothing)' 방식입니다
폼 동작을 모방하기 위해 제가 떠올릴 수 있는 가장 단순한 구조는 편집기에서 "폼"이 표시되는 방식입니다. (즉, create topic을 누르면 나타나는 "d-editor"입니다.)
이 편집기에서 다음과 같은 다른 "섹션"을 제공할 수 있습니다:
이름
위치
문제
각 섹션 제목은 플레이스홀더가 되어야 하므로, 사용자가 제목(예: 이름)을 클릭하면 해당 제목이 사라집니다.
지금까지 이 설정은 플레이스홀더 텍스트 테마 컴포넌트를 통해 가능합니다.
하지만–폼과 유사한 동작을 완전히 구현하기에는 다소 부족합니다. 왜냐하면 현재 존재하는 플레이스홀더들은 다음에 설명하듯이 “전체 또는 아무것도 아닌(all or nothing)” 방식으로 나타나기 때문입니다.
플레이스홀더를 사용한 폼과 유사한 동작. 하지만 편집기에서 div에 어떻게 접근하나요?
이것을 더 폼처럼 보이게 하려면 각 섹션이 독립적으로 작동해야 합니다.
현재 플레이스홀더 텍스트 테마 컴포넌트를 사용하면 ‘전체 또는 아무것도 아닌(all or nothing)’ 방식입니다–사용자가 편집기를 클릭하면 모든 플레이스홀더 제목이 사라집니다.
따라서 기본적인 폼 동작을 위해, 모든 제목이 나타나거나 사라지는 대신 각 플레이스홀더 제목 섹션이 독립적으로 작동해야 합니다. 즉, 사용자가 플레이스홀더 "이름"을 클릭하면 해당 플레이스홀더만 사라지고, 다른 플레이스홀더("위치"와 “문제”)는 그대로 유지되어야 합니다.
이것은 각 플레이스홀더가 텍스트 편집기 내에서 고유한 id를 가진 자신의 div의 일부가 될 수 있다면 가능합니다. 그런 다음 jquery를 사용하여 사용자가 해당 영역을 클릭했는지 여부에 따라 플레이스홀더를 표시하거나 숨길 수 있습니다. 이것은 현재 textarea 내에 별도의 div를 추가해야 하는데, 어떻게 해야 할지 확실하지 않습니다.
이 접근 방식에 대한 질문: 사용자가 클릭했을 때 조치를 취할 수 있도록 편집기의 textarea 내부의 div에 어떻게 접근할 수 있나요?
대안: 기존 템플릿 텍스트 옵션 사용. 하지만 텍스트를 편집 불가능하게 만드는 방법은?
대안으로, 사용자가 클릭할 때 섹션 헤더가 “사라지지” 않는 방식일 수 있습니다. 즉, 섹션 헤더(예: 이름, 위치, 문제)는 페이지에 남아 있는 텍스트가 됩니다. 현재 기본 주제 템플릿 기본값과 비교하여 더 폼처럼 보이게 하려면:
- 섹션 헤더 텍스트는 사용자가 편집할 수 없어야 합니다 (즉,
contenteditable="false") - 섹션 구분점은 사용자가 제거할 수 없어야 합니다
- 섹션 헤더 아래에 사용자가 입력할 수 있는 명확한 공간이 있어야 합니다. 현재 기본 템플릿에서는 텍스트가 있는 위치로 가서
return을 눌러 입력 공간을 만들어야 합니다.
이 접근 방식에 대한 질문: 템플릿 텍스트를 입력하되 (i) 사용자가 그 텍스트를 편집할 수 없게 하고 (ii) 각 텍스트 아래에 사용자가 정보를 입력할 명확한 장소를 만드는 방법은 무엇인가요?
아마도 폼과 유사한 동작을 얻는 더 나은 방법이 있을 수 있습니다.