NABI NOTE
Documentation

Utilisation du CDN ​

Pour une page statique où l'installation d'un package est peu pratique, chargez la version navigateur et son CSS depuis un CDN. La démo ci-dessous lit la version du package pendant la construction du site et crée un éditeur via l'objet global NabiNote.

Enregistrez le code ci-dessous sous et ouvrez-le dans un navigateur — vous le voyez tourner tout de suite.

<!doctype html>
<html lang="fr">
<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; }
    /* Hauteur minimale de l'éditeur — évite qu'il ressemble à une boîte d'une seule ligne au chargement. Valeur libre. */
    #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')

  // Toutes les wings sauf upload.
  // Parmi les polices, seules sans et serif sont gardées.
  // Les systèmes ne prennent pas en charge les mêmes polices : mono et cursive ont besoin d'une
  // police web importée à part pour être reconnues sur toutes les plateformes.
  // Voir la page « Police » pour le détail.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // Exemple de rappel quand la valeur change
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

Notes pour NABI NOTE ​

  • Dans le code déployé, figez le CSS et le JavaScript navigateur sur la même version. Une URL sans version, telle que latest, peut modifier le comportement lorsqu'une nouvelle version est publiée.
  • Le bundle navigateur expose l'API racine via window.NabiNote. nabi-note/ssr, nabi-note/viewer et nabi-note/diff ne sont pas des bundles globaux distincts.
  • La sauvegarde de fichiers et l'historique local dans cette démo s'exécutent dans le navigateur de l'utilisateur. Envoyez la sortie de getJson() à l'API de votre application pour un stockage serveur ou une synchronisation de compte.
  • Le téléversement nécessite la wing upload, une vraie fonction d'upload et la wing d'image ou de lien nécessaire. Votre serveur d'upload est responsable de la validation des fichiers.
  • La version navigateur intègre son analyseur HTML en interne. setHtml(), l'ouverture d'un fichier HTML et le collage de HTML ne nécessitent pas d'option d'analyseur ni d'API privée.

Le chargement via CDN modifie uniquement la manière dont la bibliothèque est chargée. Son format de stockage et sa validation des entrées sont identiques à ceux du package npm ; voir également Utilisation de base.