NABI NOTE
Documentazione

Usare CDN ​

In una pagina statica dove è difficile installare il pacchetto, puoi caricare il bundle per browser e il CSS di NABI NOTE da CDN. L'esempio seguente legge automaticamente la versione del pacchetto durante la build per creare gli indirizzi e assembla l'editor tramite l'oggetto globale NabiNote.

Salva il codice seguente come e aprilo nel browser per vederlo subito in funzione.

<!doctype html>
<html lang="it">
<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; }
    /* Altezza minima dell’editor: evita che al primo avvio sembri un campo a una sola riga. Modifica il valore liberamente. */
    #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')

  // Tutte le ali tranne il caricamento.
  // Mantiene soltanto i caratteri senza grazie e con grazie.
  // Ogni sistema offre caratteri diversi, quindi monospaziato e corsivo
  // richiedono un web font importato separatamente.
  // Consulta la pagina "Carattere" per i dettagli.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // Esempio di callback quando il valore cambia
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

Aspetti da verificare in NABI NOTE ​

  • Nel codice di distribuzione usa la stessa versione fissata sia per il CSS sia per JavaScript del browser. Un indirizzo senza versione, come latest, può modificare il comportamento quando esce una nuova versione.
  • Il bundle per browser espone l'API radice come window.NabiNote. Non esistono bundle globali separati per nabi-note/ssr, nabi-note/viewer e nabi-note/diff.
  • Il salvataggio dei file e la cronologia locale dell'esempio funzionano nel browser dell'utente. Se ti servono il salvataggio sul server o la sincronizzazione dell'account, invia il risultato di getJson() all'API dell'applicazione.
  • Quando aggiungi il caricamento, collega non solo la wing upload, ma anche la funzione di invio effettiva e le wings di immagine o collegamento necessarie. Il server di caricamento è responsabile della convalida dei file.
  • Il bundle per browser include internamente un HTML parser. Perciò setHtml(), l'apertura di file HTML e l'incollamento di HTML non richiedono un'opzione parser separata né un'API privata.

CDN cambia soltanto il modo di caricare. Il formato di salvataggio e la convalida dell'input sono gli stessi dell'installazione con npm, quindi consulta anche l'uso di base.