NABI NOTE
Dokumentasi

Menggunakan CDN ​

Pada halaman statis yang sulit memasang paket, Anda dapat memuat bundel browser dan CSS NABI NOTE melalui CDN. Contoh berikut membaca versi paket secara otomatis saat build untuk membuat alamat, lalu menyusun editor melalui objek global NabiNote.

Simpan kode di bawah sebagai lalu buka di browser — hasilnya langsung terlihat.

<!doctype html>
<html lang="id">
<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; }
    /* Tinggi minimum editor — supaya saat pertama dibuka tidak terlihat seperti kotak satu baris. Ubah nilainya sesuka Anda. */
    #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')

  // Semua wing kecuali upload.
  // Dari tipografi, hanya sans dan serif yang disisakan.
  // Setiap sistem mendukung tipografi yang berbeda, jadi mono dan cursive perlu diimpor
  // terpisah sebagai web font agar dikenali di semua platform. Rinciannya ada di halaman "Tipografi".
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

  var made = N.createNabiWith(wings, {
    locale: 'id',
    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: 'id' })
  N.mountPickedMark({ nabi: nabi, surface: surface })

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

  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: 'id'
  })

  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: 'id', 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: 'id' })

  nabi.setHtml('')

  // Contoh callback saat nilai berubah
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

Hal yang perlu diperiksa di NABI NOTE ​

  • Dalam kode penerapan, gunakan versi tetap yang sama untuk CSS dan JavaScript browser. Alamat tanpa versi seperti latest dapat mengubah perilaku saat versi baru dirilis.
  • Bundel browser menyediakan API akar sebagai window.NabiNote. Tidak ada bundel global terpisah untuk nabi-note/ssr, nabi-note/viewer, dan nabi-note/diff.
  • Penyimpanan berkas dan riwayat lokal pada contoh berjalan di browser pengguna. Jika memerlukan penyimpanan server atau sinkronisasi akun, kirim hasil getJson() ke API aplikasi.
  • Saat menambahkan unggahan, sambungkan bukan hanya wing upload, tetapi juga fungsi pengiriman yang sebenarnya serta wings gambar atau tautan yang diperlukan. Server unggahan bertanggung jawab memeriksa berkas.
  • Bundel browser menyertakan HTML parser secara internal. Karena itu, setHtml(), membuka berkas HTML, dan menempelkan HTML tidak memerlukan opsi parser terpisah atau API privat.

CDN hanya berbeda pada cara memuatnya. Format penyimpanan dan validasi masukan sama seperti saat memasang lewat npm, jadi baca juga penggunaan dasar.