글자 크기

선택한 글자의 크기 단계를 바꿉니다. 범위를 선택하면 그 범위에 적용하고, 캐럿만 있으면 현재 문단의 글자 크기를 바꿉니다. 저장 데이터에는 px 같은 임의 값이 아니라 허용한 단계만 남습니다.

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

const selected = [
  boldWing,
  italicWing,
  underlineWing,
  strikeWing,
  typefaceWing,
  fontSizeWing,
  clearFormatWing,
]
const { nabi, registry } = createNabiWith(selected)

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

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'ko' }
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()))
ts
const selected = wings().use('fs', {
  values: ['sm', 'lg', 'xl'],
}).build()

values를 생략하면 xs, sm, lg, xl 단계를 사용합니다. 목록을 좁히면 이전 문서에 들어 있던 다른 단계도 불러올 때 제거됩니다.

CSS 스타일

크기는 .nabi-content [data-nabi-size="xs"]처럼 저장된 단계 선택자로 바꿀 수 있습니다. 문서에 없는 임의의 단계는 만들지 말고, 등록한 values 안에서만 CSS를 조정하세요.

css
.article-body [data-nabi-size="xs"] { font-size: .78em; }
.article-body [data-nabi-size="sm"] { font-size: .9em; }
.article-body [data-nabi-size="lg"] { font-size: 1.3em; }
.article-body [data-nabi-size="xl"] { font-size: 1.65em; }

단계 사이의 크기 차이를 일정하게 두면 작성자가 편집기에서 고른 의미가 게시 화면에서도 유지됩니다.