NABI NOTE
مستندات

استفاده از CDN ​

در صفحهٔ ایستایی که نصب بسته دشوار است، می‌توانید باندل مرورگر و CSS ‏NABI NOTE را از CDN بارگیری کنید. نمونهٔ زیر هنگام build نسخهٔ بسته را خودکار می‌خواند و نشانی‌ها را می‌سازد، سپس ویرایشگر را با شیء سراسری NabiNote سرهم می‌کند.

کد زیر را با نام ذخیره و در مرورگر باز کنید.

<!doctype html>
<html lang="fa" dir="rtl">
<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: 'fa',
    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: 'fa' })
  N.mountPickedMark({ nabi: nabi, surface: surface })

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

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

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

  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 برنامه بفرستید.
  • هنگام افزودن بارگذاری، فقط wingِ upload را اضافه نکنید؛ تابع واقعی ارسال و wings لازم برای تصویر یا پیوند را نیز وصل کنید. اعتبارسنجی پرونده بر عهدهٔ سرور بارگذاری است.
  • باندل مرورگر HTML parser را درون خود دارد. بنابراین برای setHtml()، باز کردن پروندهٔ HTML یا چسباندن HTML به گزینهٔ parser جداگانه یا API خصوصی نیاز نیست.

CDN فقط در شیوهٔ بارگیری تفاوت دارد. قالب ذخیره‌سازی و اعتبارسنجی ورودی مانند نصب از npm است؛ پس استفادهٔ پایه را هم ببینید.