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.6.1/dist/nabi.css">
  <style>
    html, body { height: 100%; margin: 0; }
    /* In questo esempio, l’editor occupa tutta l’altezza del browser. Regola l’altezza in base al layout del tuo sito. */
    #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')

  // Seleziona le wing di modifica e gestione dei file usate in questo esempio.
  // Questo esempio carica solo caratteri senza grazie e con grazie.
  // Per usare caratteri monospaziati o calligrafici, carica nella pagina anche i file dei caratteri corrispondenti.
  // Consulta la documentazione sui caratteri 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('')

  // Questo esempio programma un salvataggio quando il documento 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.