체크리스트

항목 앞에 체크 상자가 있는 목록입니다. 준비물, 할 일, 점검 항목을 적을 때 씁니다. 상자를 누르면 체크되고, 체크된 항목은 흐리게 줄이 그어집니다.

createEditor('#editor', {
  toolbar: 'checklist bulletList orderedList',
});

만들고 체크하기

• 툴바의 checklist 또는 Ctrl+Shift+9. 글머리 목록 안에서 누르면 그 목록이 체크리스트로 바뀌고, 다시 누르면 보통 목록으로 돌아갑니다.
• 빈 줄 맨 앞에서 [ ] 를 치면 빈 상자, [x] 를 치면 체크된 항목으로 시작합니다.
• 항목 왼쪽의 상자를 누르면 체크가 켜지고 꺼집니다. 이 변경도 실행 취소할 수 있습니다.
• Enter 로 만든 새 항목은 체크가 꺼진 채로 시작합니다.
• 읽기 전용일 때는 상자를 눌러도 바뀌지 않습니다.

프리셋

full 은 첫 줄, board(기본)는 ⋯ 더 보기 안에 있습니다. basic 과 minimal 에는 없습니다. listMenu 메뉴에도 들어 있습니다.

저장되는 HTML

<ul data-checklist="">
  <li data-checked="true">회의실 예약</li>
  <li data-checked="false">발표 자료 보내기</li>
</ul>

상자는 CSS로 그립니다. 보기 화면에 82editor.css 를 넣고 글을 감싸는 요소에 class="e82-view" 를 주면 에디터와 같은 상자가 보입니다. 직접 그리려면 아래처럼 하면 됩니다.

ul[data-checklist] { list-style: none; padding-left: 4px; }
ul[data-checklist] > li::before { content: '☐ '; }
ul[data-checklist] > li[data-checked='true']::before { content: '☑ '; }
ul[data-checklist] > li[data-checked='true'] { color: #6e7781; text-decoration: line-through; }

마크다운으로 꺼내면 - [x] 회의실 예약 처럼 나옵니다.

옵션