🌸 Blossom Media Widget

Einfaches Einbettungsbeispiel — ein data-blossom-Attribut genügt.

Verwendung

Felder mit dem Attribut data-blossom erhalten automatisch einen 🌸 Mediathek-Button. Nach dem Auswählen einer Datei wird die URL direkt ins Feld geschrieben.

Du kannst das Plugin auch standalone per Bookmarklet nutzen. Siehe Bookmarklet-Setup (öffnet bookmarklet-popup.html im eigenen Fenster).

Für den kompletten Editor-Popup-Flow siehe TipTap Popup Bookmarklet (öffnet tiptap-popup.html als serverless Editor mit Mediahook).

onInsert-Callback — Ausgabe

Einbettung (diese Seite verwendet Variante A)

Variante A — Auto-Init via data-blossom-config:
Konfiguration direkt im <script>-Tag als JSON-String. Das Widget initialisiert sich automatisch nach dem DOM-Ready.

<script
  src="blossom-media.iife.js"
  data-blossom-config='{
    "servers": ["https://blossom.primal.net"],
    "relayUrl": "wss://relay.damus.io"
  }'
></script>

Variante B — Manuelles Init:
Erlaubt Callbacks und dynamische Konfiguration.

<script src="blossom-media.iife.js"></script>
<script>
  const media = window.BlossomMedia.init({
    servers: ['https://blossom.primal.net'],
    relayUrl: 'wss://relay.damus.io',
    visionEndpoint: 'https://my-describer.example/api/vision',
    onInsert: (result, targetElement) => {
      console.log('Eingefügt:', result.url);
    },
  });
</script>