NABI NOTE
ஆவணங்கள்

CDN-ஐப் பயன்படுத்துதல் ​

தொகுப்பை நிறுவுவது கடினமான நிலையான பக்கத்தில், CDN-இலிருந்து NABI NOTE-இன் உலாவி bundle மற்றும் CSS-ஐ ஏற்றலாம். கீழேயுள்ள எடுத்துக்காட்டு build நேரத்தில் தொகுப்பு பதிப்பைத் தானாகப் படித்து முகவரிகளை உருவாக்கி, உலகளாவிய NabiNote பொருளால் திருத்தியை அமைக்கிறது.

கீழுள்ள நிரலை ஆகச் சேமித்து உலாவியில் திறக்கவும் — உடனே செயல்படுவதைப் பார்க்கலாம்.

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

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

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

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

  nabi.setHtml('')

  // Example callback for when the value changes
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

NABI NOTE-இல் கவனிக்க வேண்டியவை ​

  • வெளியீட்டுக் குறியீட்டில் CSS மற்றும் உலாவி JavaScript இரண்டிற்கும் ஒரே நிலையான பதிப்பைப் பயன்படுத்துங்கள். latest போன்ற பதிப்பில்லா முகவரி புதிய பதிப்பு வெளியாகும் நாளில் செயல்பாட்டை மாற்றலாம்.
  • உலாவி bundle அடிப்படை API-ஐ window.NabiNote ஆக வழங்குகிறது. nabi-note/ssr, nabi-note/viewer, nabi-note/diff ஆகியவற்றுக்கு தனித்தனி global bundle இல்லை.
  • எடுத்துக்காட்டில் கோப்பு சேமிப்பும் உள்ளூர் வரலாறும் பயனரின் உலாவியிலேயே இயங்குகின்றன. சேவையகச் சேமிப்பு அல்லது கணக்கு ஒத்திசைவு தேவைப்பட்டால், getJson() முடிவை பயன்பாட்டின் API-க்கு அனுப்புங்கள்.
  • பதிவேற்றத்தைச் சேர்க்கும்போது upload wing மட்டும் அல்லாமல், உண்மையான அனுப்பும் செயல்பாடு மற்றும் தேவையான படம் அல்லது இணைப்பு wings-ஐயும் இணைக்கவும். கோப்புச் சரிபார்ப்பு பதிவேற்ற சேவையகத்தின் பொறுப்பு.
  • உலாவி bundle-ல் HTML parser உள்ளமைவாக இணைக்கப்பட்டுள்ளது. எனவே setHtml(), HTML கோப்பைத் திறத்தல் அல்லது HTML ஒட்டுதல் ஆகியவற்றுக்கு தனி parser விருப்பமோ தனிப்பட்ட API-யோ தேவையில்லை.

CDN ஏற்றும் முறையில் மட்டுமே வேறுபடுகிறது. சேமிப்பு வடிவமும் உள்ளீட்டுச் சரிபார்ப்பும் npm நிறுவலுடன் ஒன்றே; எனவே அடிப்படைப் பயன்பாட்டையும் பாருங்கள்.