인라인 편집

작업 또는 프로젝트를 더블 클릭하면 인라인으로 편집할 수 있습니다. 인라인 편집은 기본적으로 활성화되어 있습니다.

팁

To Do List의 readonly 모드를 활성화하면 인라인 편집을 사용할 수 없습니다.

지원되는 데이터 형식

인라인 편집기는 텍스트와 숫자, 해시태그, 날짜의 세 가지 데이터 유형을 허용합니다.

인라인 편집기에 텍스트나 숫자를 직접 입력하세요.

해시태그를 사용하여 작업을 분류하고 검색을 더 쉽게 하세요. 다음 규칙을 따르세요:

정보

tags 속성을 통해 기본 태그 목록을 생성하세요.

인라인 편집기를 통해 날짜를 입력하려면 ! 기호를 입력하세요 — 페이지에 내장 날짜 선택기가 표시됩니다.

특수 기호 !()로 텍스트를 감쌀 수도 있습니다. 예를 들어 !(예약 날짜 입력)을 입력하고 Enter를 눌러 편집기를 닫으세요. 나중에 이 텍스트를 클릭하면 날짜 선택기가 다시 열립니다.

정보

날짜 외관은 locale 및 날짜 형식에 따라 달라집니다.

특정 작업 또는 프로젝트의 편집기를 열려면 openInlineEditor() 메서드를 사용하세요. 아래 코드는 특정 작업의 편집기를 엽니다:

list.openInlineEditor({ id: "1.1.1" });

편집기를 닫고 변경 사항을 저장하려면 closeInlineEditor() 메서드에 항목 id를 전달하세요:

list.closeInlineEditor({
    id: "1.1.1"
});

변경 사항을 저장하지 않고 편집기를 닫으려면 save 매개변수를 false로 설정하세요. 아래 예제는 닫을 때 변경 사항을 취소합니다:

list.closeInlineEditor({
    id: "1.1.1",
    save: false
});

edit-item 이벤트를 구독하여 인라인 편집기에 입력된 값을 추적하세요. 이 이벤트는 사용자가 입력할 때, 값이 저장되기 전에 발생합니다.

아래 코드는 작업 또는 프로젝트의 현재 편집기 값을 로그에 기록합니다:

list.api.on("edit-item", ({ id, currentValue }) => {
    console.log("Current value of", id, "is", currentValue);
});

정보

자세한 내용은 키보드 탐색 가이드를 참고하세요.