Kutumia CDN

Kwenye ukurasa tuli ambako ni vigumu kusakinisha kifurushi, unaweza kupakia bundle ya kivinjari na CSS ya NABI NOTE kutoka CDN. Mfano hapa chini husoma toleo la kifurushi wakati wa build ili kutengeneza anwani, kisha huunda kihariri kupitia global object NabiNote.

Hifadhi msimbo ulio hapa chini kama kisha uufungue katika kivinjari — utaona ukifanya kazi mara moja.

<!doctype html>
<html lang="sw">
<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; }
    /* Urefu wa chini wa kihariri — huzuia kisionekane kama kisanduku cha mstari mmoja. Badilisha upendavyo. */
    #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')

  // Kila bawa isipokuwa upakiaji.
  // Bila serif na yenye serif pekee zimehifadhiwa.
  // Mifumo hutumia aina tofauti za herufi, hivyo nafasi moja na mwandiko zinahitaji fonti ya wavuti kuingizwa kando
  // kabla ya kila jukwaa kuzitambua. Tazama ukurasa wa "Aina ya herufi" kwa maelezo.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // Mfano wa mwitiko thamani inapobadilika
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

Mambo ya kuangalia katika NABI NOTE

Katika msimbo wa usambazaji, tumia toleo lilelile lisilobadilika kwa CSS na JavaScript ya kivinjari. Anwani isiyo na toleo kama latest inaweza kubadilisha tabia siku toleo jipya linapotolewa.
Bundle ya kivinjari hutoa API ya msingi kama window.NabiNote. Hakuna bundle tofauti za jumla za nabi-note/ssr, nabi-note/viewer, na nabi-note/diff.
Kuhifadhi faili na historia ya ndani katika mfano hufanya kazi kwenye kivinjari cha mtumiaji. Ikiwa unahitaji hifadhi ya seva au ulandanishi wa akaunti, tuma matokeo ya getJson() kwenye API ya programu.
Unapoongeza upakiaji, usiunganishe wing upload pekee; unganisha pia kazi halisi ya kutuma na wings za picha au kiungo zinazohitajika. Seva ya upakiaji ndiyo inayowajibika kuthibitisha faili.
Bundle ya kivinjari huunganisha HTML parser ndani yake. Kwa hiyo setHtml(), kufungua faili ya HTML, na kubandika HTML havihitaji chaguo tofauti la parser au API ya faragha.

CDN hutofautiana tu katika namna ya kupakia. Muundo wa kuhifadhi na uthibitishaji wa ingizo ni sawa na usakinishaji wa npm, kwa hiyo soma pia matumizi ya msingi.

Kutumia CDN ​

Mambo ya kuangalia katika NABI NOTE ​

Kutumia CDN

Mambo ya kuangalia katika NABI NOTE