NABI NOTE
పత్రాలు

CDN ఉపయోగించడం ​

ప్యాకేజీని ఇన్‌స్టాల్ చేయడం కష్టమైన స్థిర పేజీలో, CDN నుంచి NABI NOTE బ్రౌజర్ బండిల్ మరియు CSSని లోడ్ చేయవచ్చు. దిగువ ఉదాహరణ బిల్డ్ సమయంలో ప్యాకేజీ వెర్షన్‌ను స్వయంచాలకంగా చదివి చిరునామాలు తయారు చేస్తుంది; తరువాత గ్లోబల్ NabiNote ఆబ్జెక్ట్‌తో ఎడిటర్‌ను సమకూరుస్తుంది.

కింది కోడ్‌ను గా సేవ్ చేసి బ్రౌజర్‌లో తెరవండి — వెంటనే పనిచేస్తుంది.

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

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

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

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

  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 ద్వారా ఇన్‌స్టాల్ చేసినప్పటిలాగే ఉంటాయి; కాబట్టి ప్రాథమిక వినియోగం కూడా చూడండి.