NABI NOTE
दस्तावेज़

CDN का उपयोग ​

ऐसे स्थिर पेज पर जहाँ पैकेज इंस्टॉल करना कठिन हो, आप CDN से NABI NOTE का ब्राउज़र बंडल और CSS लोड कर सकते हैं। नीचे का उदाहरण बिल्ड के समय पैकेज संस्करण को अपने-आप पढ़कर पते बनाता है और ग्लोबल ऑब्जेक्ट NabiNote से एडिटर तैयार करता है।

नीचे दिए कोड को के नाम से सहेजें और ब्राउज़र में खोलें — तुरंत काम करता दिखेगा।

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

  // upload को छोड़कर बाक़ी सभी wing।
  // टाइपफ़ेस में से सिर्फ़ sans और serif रखे गए हैं।
  // हर सिस्टम अलग-अलग टाइपफ़ेस सपोर्ट करता है, इसलिए mono और cursive को हर प्लेटफ़ॉर्म पर
  // पहचाने जाने के लिए अलग से वेब-फ़ॉन्ट के रूप में import करना पड़ता है। विवरण "टाइपफ़ेस" पेज पर देखें।
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  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 wings भी जोड़ें। फ़ाइल जाँच अपलोड सर्वर की ज़िम्मेदारी है।
  • ब्राउज़र बंडल में HTML parser पहले से जुड़ा होता है। इसलिए setHtml(), HTML फ़ाइल खोलने या HTML पेस्ट करने के लिए अलग parser विकल्प या निजी API की आवश्यकता नहीं है।

CDN केवल लोड करने के तरीके में अलग है। सेव करने का फ़ॉर्मैट और इनपुट जाँच npm इंस्टॉल के समान हैं, इसलिए बुनियादी उपयोग भी देखें।