NABI NOTE
문서

이미지 ​

이미지 주소를 넣고 폭과 정렬을 조절합니다. 주소는 http:, https: 또는 같은 사이트 경로만 기본으로 허용하며, 새 이미지는 가운데 정렬과 60% 폭으로 시작합니다.

폭은 정해진 단계 안에서만 저장되고 정렬은 이미지를 감싼 문단에 저장됩니다. blob:과 data:image/... 미리보기를 쓰려면 이미지 wing과 편집기 조립 쪽에서 각각 로컬 URL을 명시적으로 허용해야 합니다. SVG 데이터 URL은 허용되지 않습니다.

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

const selected = [
  ...tableWings,
  imageWing,
  youtubeWing,
]
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('img', {
  allowLocalUrls: false,
}).build()

이 wing은 주소를 문서에 넣는 기능이며 파일 전송은 하지 않습니다. 파일을 서버로 보내려면 업로드 wing을 연결합니다.

CSS 스타일 ​

이미지는 .nabi-content img로 꾸밉니다. 저장된 폭과 정렬은 그대로 두고 테두리나 그림자처럼 모양만 바꾸세요.

css
.article-body img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.dark .article-body img { box-shadow: 0 8px 24px rgb(0 0 0 / 35%); }

max-inline-size, block-size, 폭과 정렬에 관한 기본 규칙은 유지하세요. 이미지 크기는 문서에 저장된 값이므로 CSS에서 강제로 고정하면 작성자가 정한 폭과 충돌할 수 있습니다.