Bild ​

Fügen Sie eine Bild-URL ein und passen Sie deren Breite und Ausrichtung an. Standardmäßig sind Adressen auf http:, https: oder Pfade derselben Site beschränkt, und ein neues Bild beginnt zentriert mit einer Breite von 60 %.

Die Breite wird nur in festen Schritten gespeichert, und die Ausrichtung wird im Absatz gespeichert, der das Bild umgibt. Um blob:- oder data:image/...-Vorschauen zu verwenden, müssen lokale URLs sowohl im Bild-Wing als auch in der Editor-Baugruppe explizit erlaubt werden. SVG-Daten-URLs sind nicht erlaubt.

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

Dieser Wing fügt eine Adresse in das Dokument ein; er lädt keine Dateien hoch. Um Dateien an einen Server zu senden, verbinden Sie den Upload-Wing.

Eine Bildauswahl einbinden ​

Mit panels.img in mountToolbar() ersetzen Sie den standardmäßigen URL-Dialog der Bildschaltfläche durch die Bildauswahl Ihres Dienstes. Die Schlüssel sind Namen von Toolbar-Slots; nicht angegebene Werkzeuge behalten ihre Standarddialoge.

mode: 'modal' öffnet ein Fenster über einem halbtransparenten Hintergrund, der die gesamte Seite bedeckt. mode: 'inline' öffnet es auf dem Desktop nahe der Werkzeugschaltfläche und auf Mobilgeräten im Vollbild. Die Viewportbreite und --nabi-mobile-breakpoint bestimmen die mobile Darstellung; wird diese Grenze bei geöffnetem inline-Panel überschritten, schließt sich das Panel.

Beide Modi stellen nur ein leeres root bereit, ohne Titel, Eingabefelder oder Schaltflächen. Fügen Sie Ihr HTML oder Ihre UI in render hinzu, verbinden Sie die Schließen-Schaltfläche mit close() und die Bildauswahl mit insertImage(url, 'pointer'). Bestehende Funktionseinträge (img: renderer) behalten ihre bisherige Darstellung.

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 implementieren Sie in Ihrem Dienst. Die Funktion erstellt Ihre UI synchron im übergebenen root und gibt eine Aufräumfunktion zurück. Verbinden Sie signal mit asynchronen Vorgängen wie dem Laden einer Bilderliste oder einem Upload und übergeben Sie die ausgewählte Bild-URL an onSelect. Diese API überträgt keine Dateien; die bisherigen Regeln für Bild-URLs gelten weiterhin.

insertImage(src, by?) entspricht run('insertImage', { src }, by), einschließlich Rückgabewert und Regeln zur Wiederherstellung der Auswahl. Ohne by wird 'keyboard' verwendet. Definieren Sie render nicht als async-Funktion.

Beim Schließen des Panels oder Entfernen der Toolbar wird signal abgebrochen und die Aufräumfunktion aufgerufen. run() schließt das Panel und führt einen Befehl einmal an der beim Öffnen erfassten Auswahl aus. Ist das Panel bereits geschlossen oder wurde der Dokumentinhalt seit dem Öffnen geändert, gibt es false zurück, ohne den Befehl auszuführen.

Wird nur der Cursor versetzt, erfolgt das Einfügen an der ursprünglichen Position, an der das Fenster geöffnet wurde. Wurde es in einer Tabellenzelle oder einem Float-Bereich geöffnet, wird das Bild dort eingefügt. Nach dem Bearbeiten oder Ersetzen des Dokuments wird das Einfügen mit einem Hinweis abgebrochen, selbst wenn Rückgängig denselben Inhalt wiederherstellt. Öffnen Sie das Fenster erneut und wählen Sie das Bild noch einmal.

CSS-Stile ​

Stilieren Sie Bilder mit .nabi-content img. Bewahren Sie die gespeicherte Breite und Ausrichtung bei und ändern Sie nur visuelle Details wie Rahmen oder Schatten.

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

Bewahren Sie die Standardregeln für max-inline-size, block-size, Breite und Ausrichtung bei. Die Bildgröße wird im Dokument gespeichert, sodass das Erzwingen einer festen CSS-Breite mit der vom Autor gewählten Breite in Konflikt stehen kann.