NABI NOTE
Belgeler

CDN kullanımı ​

Paketi yüklemenin zor olduğu statik sayfalarda NABI NOTE tarayıcı paketini ve CSS'sini CDN üzerinden yükleyebilirsiniz. Aşağıdaki örnek, derleme sırasında paket sürümünü otomatik olarak okuyup adresleri oluşturur ve düzenleyiciyi genel NabiNote nesnesiyle kurar.

Aşağıdaki kodu adıyla kaydedip tarayıcıda açın; hemen çalıştığını görebilirsiniz.

<!doctype html>
<html lang="tr">
<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; }
    /* Düzenleyicinin en küçük yüksekliği; ilk açılışta tek satırlı kutu gibi görünmesini önler. Dilediğiniz gibi değiştirin. */
    #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')

  // Yükleme dışındaki tüm kanatlar.
  // Yalnızca sans ve serif yazı tipleri korunur. Sistemler farklı yazı tiplerini desteklediğinden eş aralıklı ve el yazısı tipleri ayrı web yazı tipi olarak içe aktarılmalıdır. Ayrıntılar için Yazı tipi sayfasına bakın.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // Değer değiştiğinde çalışacak örnek geri çağırım
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

NABI NOTE'ta dikkat edilmesi gerekenler ​

  • Dağıtım kodunda CSS ve tarayıcı JavaScript'i için aynı sabit sürümü kullanın. latest gibi sürümü olmayan bir adres, yeni sürüm çıktığı gün davranışı değiştirebilir.
  • Tarayıcı paketi kök API'yi window.NabiNote olarak sunar. nabi-note/ssr, nabi-note/viewer ve nabi-note/diff için ayrı genel paketler yoktur.
  • Örnekteki dosya kaydetme ve yerel geçmiş kullanıcının tarayıcısında çalışır. Sunucuya kaydetme veya hesap eşitleme gerekiyorsa getJson() sonucunu uygulama API'sine gönderin.
  • Yükleme eklerken yalnızca upload wing'ini değil, gerçek gönderme işlevini ve gereken görsel ya da bağlantı wings'lerini de bağlayın. Dosya doğrulamasından yükleme sunucusu sorumludur.
  • Tarayıcı paketi HTML parser'ını içinde barındırır. Bu nedenle setHtml(), HTML dosyası açma ve HTML yapıştırma için ayrı bir parser seçeneği veya özel API gerekmez.

CDN yalnızca yükleme biçiminde farklıdır. Kaydetme biçimi ve girdi doğrulaması npm ile kurulumdakiyle aynıdır; bu nedenle temel kullanımı da inceleyin.