체크리스트

설명

taskList() 은 <ul data-nabi-list="task"> 와 항목의 data-nabi-checked 를 소유(claim)합니다. 글머리 목록과 태그는 같고 속성으로 갈립니다.

글자 앞의 네모를 누르면 체크가 뒤집힙니다. 글자 앞 1.7em 영역만 눌립니다.
[ ] 나 [x] 를 입력해도 만들어집니다.
네모는 CSS ::before 이며 진짜 <input> 이 아닙니다. contenteditable 안의 폼 요소는 캐럿(caret)을 엉키게 만들기 때문입니다.
체크 상태는 항목의 속성이므로 중첩하거나 옮겨도 그대로 남고, 문서에 저장됩니다.
나갈 때는 표식을 떼고 출력 전용 체크박스로 번역됩니다. <input type="checkbox" disabled> 가 심기고 끝난 항목에는 line-through 가 붙어, nabi.css 없이 열어도 체크 상태가 읽힙니다. 다시 들여올 때 그 모양을 보고 되돌리므로 왕복이 무손실입니다.
Tab 과 Shift+Tab 으로 들여쓰고 내어씁니다.

데모

wing

HTML에디터를 불러오는 중…

미리보기위의 값을 읽는 사람 화면에 그대로 그린 자리입니다. 편집 화면에서는 안 도는 기능이 여기서 동작합니다 — 표 제목을 눌러 정렬하고, 이미지를 눌러 크게 보세요.

설치

npm install nabi-note

코드

import { nabi } from 'nabi-note'
import 'nabi-note/style.css'

nabi.create('#editor', {
  wings: [],
  locale: 'ko',
  onChange: (html) => 저장(html),
})

체크리스트 ​

설명 ​

데모 ​

체크리스트

설명

데모