NABI NOTE
문서

CDN 이용하기 ​

패키지를 설치하기 어려운 정적 페이지에서는 브라우저용 번들과 CSS를 CDN으로 불러올 수 있습니다. 아래 예제는 빌드할 때 패키지 버전을 자동으로 읽어 주소를 만들고, 전역 객체 NabiNote로 편집기를 조립합니다.

아래 코드를 로 저장한 뒤 브라우저에서 열면 바로 확인할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NABI NOTE</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nabi-note@1.0.0/dist/nabi.css">
  <style>
    html, body { height: 100%; margin: 0; }
    /* 이 예제에서는 편집기가 브라우저 높이를 채웁니다. 사이트 레이아웃에 맞게 높이를 조정하세요. */
    #app { height: 100vh; }
    #editor { flex: 1; min-height: 0; overflow-y: auto; }
  </style>
</head>
<body>

<div id="app" class="nabi">
  <div id="chrome" class="nabi-toolbar">
    <div class="nabi-toolbar-row">
      <span id="tools"></span>
      <div id="toolbar"></div>
    </div>
    <div id="context"></div>
  </div>
  <div id="editor" class="nabi-content"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/nabi-note@1.0.0/dist/browser/nabi-note.min.js"></script>
<script>
  var N = NabiNote
  var app = document.querySelector('#app')
  var surface = document.querySelector('#editor')

  // 이 예제에서 사용할 편집·파일 날개를 선택합니다.
  // 이 예제에서는 산세리프와 세리프 글꼴만 불러옵니다.
  // 고정폭이나 필기체를 사용하려면 해당 글꼴 파일도 페이지에서 함께 불러오세요.
  // 자세한 방법은 "서체" 문서에서 확인할 수 있습니다.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

  var made = N.createNabiWith(wings, {
    locale: 'ko',
    ask: {
      message: function (text) { window.alert(text) },
      confirm: function (text) { return window.confirm(text) }
    }
  })
  var nabi = made.nabi
  var registry = made.registry

  N.mountSurface({ nabi: nabi, registry: registry, root: surface, locale: 'ko' })
  N.mountPickedMark({ nabi: nabi, surface: surface })

  var settle = N.watchSettle(document, { surface: surface })
  var shared = { nabi: nabi, registry: registry, surface: surface, settle: settle, locale: 'ko' }

  var history = N.mountLocalHistory({ nabi: nabi, storage: N.browserHistoryStorage(window) })
  var file = N.mountFile({
    nabi: nabi, registry: registry, store: N.browserFileStore(document),
    name: function () { return 'note' }, locale: 'ko'
  })

  var toolbar = N.mountToolbar(Object.assign({}, shared, {
    root: document.querySelector('#toolbar'),
    file: file,
    onHost: function (w) {
      if (w !== 'localHistory') return
      N.openHistoryPanel({
        history: history, surface: surface, locale: 'ko', sessionId: history.sessionId,
        render: function (record) {
          return N.renderStoredHtml(JSON.parse(record.body), registry) || ''
        }
      })
    }
  }))
  var context = N.mountContextToolbar(Object.assign({}, shared, { root: document.querySelector('#context') }))

  N.mountHints({ toolbar: toolbar, context: context, root: document.querySelector('#chrome'), surface: surface })
  N.mountViewTools({ nabi: nabi, surface: surface, root: app, container: document.querySelector('#tools'), locale: 'ko' })

  nabi.setHtml('')

  // 문서가 바뀔 때 저장 작업을 예약하는 예제입니다.
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

NABI NOTE에서 확인할 점 ​

  • 배포 코드에서는 CSS와 브라우저용 JavaScript에 같은 고정 버전을 사용합니다. latest처럼 버전이 없는 주소는 새 버전이 나온 날 동작이 바뀔 수 있습니다.
  • 브라우저 번들은 루트 API를 window.NabiNote로 제공합니다. nabi-note/ssr, nabi-note/viewer, nabi-note/diff는 별도의 전역 번들로 제공되지 않습니다.
  • 예제의 파일 저장과 로컬 히스토리는 사용자의 브라우저 안에서 동작합니다. 서버 저장이나 계정 동기화가 필요하면 getJson() 결과를 애플리케이션 API로 전송합니다.
  • 업로드를 추가할 때는 upload 날개뿐 아니라 실제 전송 함수와 필요한 이미지 또는 링크 날개를 연결합니다. 파일 검증은 업로드 서버가 담당합니다.
  • 브라우저 번들은 HTML parser를 내부에 연결합니다. 따라서 setHtml(), HTML 파일 열기, HTML 붙여넣기에 별도 parser 옵션이나 비공개 API가 필요하지 않습니다.

CDN은 불러오는 방식만 다릅니다. 저장 형식과 입력 검증은 npm으로 설치했을 때와 같으므로 기본 사용법을 함께 확인하세요.