NABI NOTE
Takardu

Amfani da CDN ​

A shafi na tsaye inda shigar da kunshi yake da wahala, za ka iya loda browser bundle da CSS na NABI NOTE daga CDN. Misalin da ke ƙasa yana karanta sigar kunshin kai tsaye a lokacin build don ƙirƙirar adireshi, sannan ya haɗa editan da global object NabiNote.

Ajiye lambar da ke ƙasa a matsayin , sannan buɗe ta a burauza.

<!doctype html>
<html lang="ha">
<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; }
    /* Mafi ƙarancin tsayin edita. */
    #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')

  // Kowane fikafiki sai ɗorawa.
  // Sans da serif kawai aka ajiye.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // Misalin callback idan ƙima ta canja
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

Abubuwan da za a duba a NABI NOTE ​

  • A cikin lambar turawa, yi amfani da sigar tsayayyiya iri ɗaya don CSS da JavaScript na mai bincike. Adireshin da ba shi da sigar kamar latest na iya canza aiki ranar da sabuwar siga ta fito.
  • Browser bundle yana ba da tushen API a matsayin window.NabiNote. Babu bundle na duniya dabam ga nabi-note/ssr, nabi-note/viewer, da nabi-note/diff.
  • Ajiye fayil da tarihin gida a misalin suna aiki a cikin mai binciken mai amfani. Idan ana buƙatar ajiyar uwar garke ko daidaita asusu, aika sakamakon getJson() zuwa API na aikace-aikacenku.
  • Lokacin ƙara upload, kada a haɗa wing upload kaɗai; haɗa ainihin aikin aikawa da wings na hoto ko mahaɗi da ake buƙata. Uwar garken upload ce ke da alhakin tantance fayil.
  • Browser bundle yana haɗa HTML parser a ciki. Saboda haka setHtml(), buɗe fayil ɗin HTML, da manna HTML ba sa buƙatar zaɓin parser daban ko API na sirri.

CDN ya bambanta ne kawai wajen yadda ake lodawa. Tsarin ajiya da tantance shigarwa iri ɗaya ne da na shigar npm, saboda haka duba kuma amfani na asali.