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.6.1/dist/nabi.css">
  <style>
    html, body { height: 100%; margin: 0; }
    /* Katika mfano huu, kihariri kinajaza urefu wote wa kivinjari. Rekebisha urefu kulingana na mpangilio wa tovuti yako. */
    #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.6.1/dist/browser/nabi-note.min.js"></script>
<script>
  var N = NabiNote
  var app = document.querySelector('#app')
  var surface = document.querySelector('#editor')

  // Chagua mabawa ya uhariri na faili yatakayotumika katika mfano huu.
  // Mfano huu unapakia fonti zisizo na serif na zenye serif pekee.
  // Ili kutumia fonti za upana sawa au mwandiko, pakia pia faili za fonti hizo kwenye ukurasa.
  // Tazama nyaraka za “Aina ya herufi” kwa maelezo zaidi.
  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 huu unapanga kuhifadhi hati 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