Note de bas de page
Reliez des explications complémentaires à des numéros dans le texte et à une liste en fin de document.
Saisissez le texte avec le bouton de note de bas de page de la barre d’outils pour insérer une note au curseur. Si du texte est sélectionné, la note est ajoutée à la fin de la sélection sans remplacer le texte. Les numéros ne sont pas enregistrés ; ils suivent automatiquement l’ordre du document.
Cliquez sur un numéro dans le texte pour modifier son contenu dans la ligne des propriétés. Utilisez l’outil de suppression ou appuyez deux fois sur Backspace ou Delete à côté de la note pour la sélectionner puis la supprimer. La liste en dessous est en lecture seule et disparaît lorsqu’il n’y a plus de notes.
Dans l’aperçu et sur les pages publiées avec le viewer, survolez un numéro, cliquez dessus ou touchez-le pour lire son contenu. Celui-ci accepte une seule ligne de texte brut et s’affiche en caractères sans empattement à 0,875 fois la taille de base du corps du texte. Le HTML s’affiche littéralement.
npm install nabi-noteimport {
createLocale, createNabiWith, mountSurface, mountToolbar,
mountContextToolbar, mountHints, watchSettle, highlightWing, linkWing,
footnoteWing, mountViewTools,
} from 'nabi-note'
const selected = [
highlightWing,
linkWing,
footnoteWing,
]
const locale = createLocale('fr')
const { nabi, registry } = createNabiWith(selected, { locale })
const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!
// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })
// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))
// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')const selected = wings().use('fn').build()