Immagine ​

Inserisci l'URL di un'immagine e regolane larghezza e allineamento. Per impostazione predefinita sono ammessi solo http:, https: o percorsi dello stesso sito; una nuova immagine parte centrata con larghezza del 60%.

La larghezza viene salvata solo in passaggi fissi e l'allineamento nel paragrafo che racchiude l'immagine. Per usare anteprime blob: o data:image/..., abilita esplicitamente gli URL locali sia nell'wing immagine sia nella configurazione dell'editor. Gli URL di dati SVG non sono ammessi.

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('it')
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()

Questo wing inserisce un indirizzo nel documento, ma non carica file. Per inviare file a un server, collega il wing di caricamento.

Collegare un selettore di immagini ​

Usa panels.img in mountToolbar() per sostituire il campo URL predefinito del pulsante immagine con il selettore di immagini del tuo servizio. Le chiavi sono i nomi degli slot della barra degli strumenti; gli strumenti omessi mantengono le finestre predefinite.

mode: 'modal' apre una finestra su uno sfondo semitrasparente che copre l’intera pagina. mode: 'inline' la apre vicino al pulsante dello strumento su desktop e a schermo intero su dispositivi mobili. La larghezza della finestra e --nabi-mobile-breakpoint determinano la visualizzazione mobile; se questa soglia viene superata mentre un pannello inline è aperto, il pannello si chiude.

Entrambe le modalità forniscono solo un root vuoto, senza titolo, campi o pulsanti. Aggiungete il vostro HTML o la vostra interfaccia in render, collegate il pulsante di chiusura a close() e la selezione delle immagini a insertImage(url, 'pointer'). Le voci esistenti sotto forma di funzione (img: renderer) mantengono il loro comportamento di visualizzazione.

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 è una funzione da implementare nel tuo servizio. Crea l’interfaccia in modo sincrono nel root fornito e restituisce una funzione di pulizia. Collega signal alle attività asincrone, come il caricamento di un elenco di immagini o l’upload, e passa l’URL dell’immagine scelta a onSelect. Questa API non trasferisce file; restano valide le regole esistenti per gli URL delle immagini.

insertImage(src, by?) equivale a run('insertImage', { src }, by), compresi il valore restituito e le regole di ripristino della selezione. Se by viene omesso, si usa 'keyboard'. Non definite render come funzione async.

La chiusura del pannello o lo smontaggio della barra degli strumenti interrompe signal e richiama la funzione di pulizia. run() chiude il pannello e applica un comando una sola volta alla selezione acquisita all’apertura. Se il pannello è già chiuso o il contenuto del documento è cambiato dall’apertura, restituisce false senza eseguire il comando.

Se sposti soltanto il cursore, l'immagine viene inserita nella posizione originale in cui hai aperto il pannello. Se lo hai aperto in una cella o in un'area flottante, l'immagine viene inserita al suo interno. Modificare o sostituire il documento annulla l'inserimento con un avviso, anche se un annullamento ripristina lo stesso contenuto; riapri il pannello e scegli di nuovo l'immagine.

Stili CSS ​

Personalizza le immagini con .nabi-content img. Mantieni la larghezza e l'allineamento salvati e modifica solo dettagli visivi, come bordi od ombre.

.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%); }

Mantieni le regole predefinite per max-inline-size, block-size, larghezza e allineamento. La dimensione dell'immagine è salvata nel documento, quindi imporre una larghezza CSS fissa può entrare in conflitto con quella scelta dall'autore.