NABI NOTE
নথি

CDN ব্যবহার ​

যে স্থির পৃষ্ঠায় প্যাকেজ ইনস্টল করা কঠিন, সেখানে CDN থেকে NABI NOTE-এর ব্রাউজার বান্ডল ও CSS লোড করতে পারেন। নিচের উদাহরণটি বিল্ডের সময় স্বয়ংক্রিয়ভাবে প্যাকেজ সংস্করণ পড়ে ঠিকানা তৈরি করে এবং গ্লোবাল অবজেক্ট NabiNote দিয়ে এডিটর তৈরি করে।

নিচের কোডটি নামে সংরক্ষণ করে ব্রাউজারে খুললেই সঙ্গে সঙ্গে দেখা যায়।

<!doctype html>
<html lang="bn">
<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')

  // আপলোড বাদে বাকি সব wing অন্তর্ভুক্ত।
  // ফন্ট থেকে কেবল sans আর serif দুটোই রাখা হলো।
  // প্ল্যাটফর্মভেদে সমর্থিত ফন্ট আলাদা বলে মনো, হাতের লেখার মতো ফন্ট আলাদা করে import
  // না করলে সব প্ল্যাটফর্মে চেনা যাবে না। বিস্তারিত "টাইপফেস" নথিতে দেখুন।
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  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 wing নয়, প্রকৃত পাঠানোর ফাংশন এবং প্রয়োজনীয় image বা link wing-ও যুক্ত করুন। ফাইল যাচাই আপলোড সার্ভারের দায়িত্ব।
  • ব্রাউজার বান্ডলে HTML parser অন্তর্ভুক্ত থাকে। ফলে setHtml(), HTML ফাইল খোলা বা HTML পেস্ট করার জন্য আলাদা parser অপশন বা ব্যক্তিগত API লাগে না।

CDN কেবল লোড করার পদ্ধতিতে আলাদা। সংরক্ষণের ফরম্যাট ও ইনপুট যাচাই npm-এ ইনস্টল করার মতোই, তাই মৌলিক ব্যবহার-ও দেখুন।