NABI NOTE
दस्तऐवज

CDN वापरणे ​

पॅकेज स्थापित करणे कठीण असलेल्या स्थिर पानावर तुम्ही CDN वरून NABI NOTE चे ब्राउझर बंडल आणि CSS लोड करू शकता. खालील उदाहरण बिल्डच्या वेळी पॅकेजची आवृत्ती आपोआप वाचून पत्ते तयार करते आणि ग्लोबल NabiNote ऑब्जेक्टने संपादक जोडते.

खालील code नावाने जतन करा आणि browser मध्ये उघडा; तो लगेच चालताना दिसेल.

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

  // अपलोड वगळता सर्व विंग्ज.
  // फक्त sans आणि serif ठेवले आहेत. mono आणि cursive सर्व प्रणालीवर दिसण्यासाठी web font वेगळा import करा.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // मूल्य बदलल्यावर चालणारे उदाहरण callback
  // 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 ने स्थापित केल्याप्रमाणेच आहेत, म्हणून मूलभूत वापर देखील पहा.