Image ​

Insérez une URL d'image et ajustez sa largeur et son alignement. Par défaut, les adresses sont limitées à http:, https: ou aux chemins du même site, et une nouvelle image commence centrée à 60 % de la largeur.

La largeur n'est stockée que par étapes fixes, et l'alignement est stocké sur le paragraphe qui englobe l'image. Pour utiliser les aperçus blob: ou data:image/..., autorisez explicitement les URL locales à la fois dans la wing d'image et dans l'assemblage de l'éditeur. Les URL de données SVG ne sont pas autorisées.

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, tableWings, imageWing,
  youtubeWing, mountViewTools,
} from 'nabi-note'

const selected = [
  ...tableWings,
  imageWing,
  youtubeWing,
]
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('img', {
  allowLocalUrls: false,
}).build()

Cette wing insère une adresse dans le document ; elle ne téléverse pas de fichiers. Pour envoyer des fichiers à un serveur, connectez la wing de téléversement.

Connecter un sélecteur d’images ​

Utilisez panels.img avec mountToolbar() pour remplacer la saisie d’URL par défaut du bouton image par le sélecteur d’images de votre service. Les clés sont les noms des emplacements de la barre d’outils ; les outils omis conservent leur fenêtre de saisie par défaut.

mode: 'modal' ouvre une fenêtre sur un fond translucide couvrant toute la page. mode: 'inline' l’ouvre près du bouton de l’outil sur ordinateur et en plein écran sur mobile. La largeur de la fenêtre et --nabi-mobile-breakpoint déterminent l’affichage mobile ; si ce seuil est franchi alors qu’un panneau inline est ouvert, le panneau se ferme.

Les deux modes fournissent uniquement un root vide, sans titre, champ de saisie ni bouton. Ajoutez votre HTML ou votre interface dans render, reliez le bouton de fermeture à close() et la sélection d’image à insertImage(url, 'pointer'). Les entrées sous forme de fonction (img: renderer) conservent leur mode d’affichage.

import { mountToolbar } from 'nabi-note'

const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  panels: {
    img: {
      mode: 'inline',
      render: ({ root, signal, close, insertImage }) =>
        mountMyImagePicker(root, {
          signal,
          onClose: close,
          onSelect: (url: string) => insertImage(url, 'pointer'),
        }),
    },
  },
})

mountMyImagePicker est une fonction à implémenter dans votre service. Elle crée votre interface de façon synchrone dans le root fourni et renvoie une fonction de nettoyage. Reliez signal aux tâches asynchrones telles que le chargement d’une liste d’images ou le téléversement, puis transmettez l’URL de l’image choisie à onSelect. Cette API ne transfère pas de fichiers ; les règles existantes sur les URL d’images restent applicables.

insertImage(src, by?) équivaut à run('insertImage', { src }, by), y compris la valeur de retour et les règles de restauration de la sélection. Si by est omis, 'keyboard' est utilisé. Ne définissez pas render comme une fonction async.

Fermer le panneau ou démonter la barre d’outils interrompt signal et appelle la fonction de nettoyage. run() ferme le panneau et applique une commande une seule fois à la sélection enregistrée à son ouverture. Si le panneau est déjà fermé ou si le contenu du document a changé depuis son ouverture, il renvoie false sans exécuter la commande.

Si vous déplacez seulement le curseur, l'image est insérée à la position d'origine où le panneau a été ouvert. Si vous l'avez ouvert dans une cellule ou une zone flottante, l'image y est insérée. Modifier ou remplacer le document annule l'insertion avec un message, même si l'annulation rétablit le même contenu ; rouvrez le panneau pour choisir à nouveau une image.

Styles CSS ​

Stylisez les images avec .nabi-content img. Conservez la largeur et l'alignement stockés intacts, et modifiez uniquement les détails visuels tels que les bordures ou les ombres.

.article-body img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.dark .article-body img { box-shadow: 0 8px 24px rgb(0 0 0 / 35%); }

Conservez les règles par défaut pour max-inline-size, block-size, la largeur et l'alignement. La taille de l'image est stockée dans le document, donc forcer une largeur CSS fixe peut entrer en conflit avec la largeur choisie par l'auteur.