NABI NOTE
문서

각주 ​

본문의 번호와 문서 끝 목록으로 보충 설명을 연결합니다.

툴바의 각주 버튼으로 내용을 입력하면 커서 위치에 각주가 들어갑니다. 글자를 선택했다면 선택 끝에 넣고 선택한 글자는 유지합니다. 번호는 저장하지 않고 문서 순서에 따라 자동으로 매깁니다.

본문 번호를 누르면 속성 줄에서 내용을 수정할 수 있습니다. 삭제 도구로 지우거나, 각주 옆에서 Backspace 또는 Delete를 두 번 눌러 선택한 뒤 지울 수 있습니다. 하단 목록은 읽기 전용이며 각주가 없으면 사라집니다.

미리보기와 viewer를 연결한 게시 화면에서는 번호에 마우스를 올리거나 클릭·탭하면 내용을 볼 수 있습니다. 내용은 한 줄 일반 텍스트만 받으며, 본문 기본 크기의 0.875배인 산세리프로 표시합니다. HTML은 글자 그대로 표시됩니다.

wing
기본 서체높이
HTML에디터를 불러오는 중…
JSON나비트리에디터를 불러오는 중…
설치
npm install nabi-note
코드
import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, highlightWing, linkWing,
  footnoteWing, mountViewTools,
} from 'nabi-note'

const selected = [
  highlightWing,
  linkWing,
  footnoteWing,
]
const locale = createLocale('ko')
const { nabi, registry } = createNabiWith(selected, { locale })

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

// locale 이 글의 방향도 정한다 — 아랍어·우르두면 오른쪽에서 왼쪽으로 선다
mountSurface({ nabi, registry, root: content, locale })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// 미리보기·전체화면 두 단추 — 툴바 줄의 끝에 제 상자를 세워 앉는다
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// 값이 바뀔 때마다 — 여기에 당신의 코드를 건다
// nabi.onChange(() => user_callback(nabi.getHtml()))

// 언어 선택 이벤트에서 호출한다. 내용과 편집 이력은 유지된다.
// locale.setLocale('ko')
ts
const selected = wings().use('fn').build()