TutuEdit · Einbettbares Widget

Eine Zeile Code –füge in Sekunden einen Bildeditor zu deiner Website hinzu

Binde den Profi-Editor von TutuEdit (Zuschneiden / Filter / Freistellen / Text) in jede Website ein. Besucher bearbeiten Fotos direkt auf deiner Seite; konfiguriere Theme und Werkzeuge, und Produkt-Updates werden automatisch übernommen – ohne Wartung.

Live ausprobieren Einbettungscode ansehen Schlüssel generieren (ohne Prüfung)

Sofort einsetzbar · füge ihn vor dem </body> deiner Website ein

<script src="https://tutuedit.com/embed.js"
        data-key="pk_live_DEIN_SCHLUESSEL"
        data-mount="#dd-editor" defer></script>

Ersetze pk_live_DEIN_SCHLUESSEL durch den öffentlichen Schlüssel, den du selbst in der Konsole erzeugst (jeder registrierte Nutzer – ohne Prüfung, sofort); der Container #dd-editor braucht eine Breite und Höhe. Registriere beim Einbetten deine Einbettungs-URLs (Positivliste; für die lokale Entwicklung verwende localhost); er wird nur auf den von dir registrierten Seiten angezeigt.

Live ausprobieren

Tippe auf die Schaltfläche unten, um den eingebetteten Bildeditor direkt auf dieser Seite auszuprobieren.

JS API (für Callbacks / Anpassung)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_DEIN_SCHLUESSEL',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = das bearbeitete Bild (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // ein Bild öffnen
</script>

Vollständige Konfiguration

Parameter	Typ	Beschreibung
key	string	Dein pk_ Public Key (in der Konsole erzeugt). Pflichtfeld.
theme	'auto'\|'light'\|'dark'	Theme; auto folgt dem Hell-/Dunkelmodus von Host/System.
hideToolbar	boolean	Blendet die linke Werkzeugleiste aus (Szenarien für Minimalansicht / Ein-Tipp-Export).
hideHeader	boolean	Blendet die obere Leiste aus (wenn du deine eigene UI baust und über export() exportierst).
hideOpen	boolean	Blendet die Schaltfläche “Bild öffnen” aus (Bilder nur über dd.open zulassen).
hideExport	boolean	Blendet die Schaltfläche “Exportieren & herunterladen” aus (nur “Fertig & zurücksenden” verwenden).
saveText	string	Beschriftung der Schaltfläche “Fertig” (Standard “Fertig & zurücksenden”, ≤16 Zeichen).
exportFormat	'png'\|'jpg'\|'webp'	Exportformat beim Abschluss.
exportQuality	number 0..1	JPG/WebP-Qualität.

Methoden

dd.open(url, name?)Öffnet ein Bild im Editor (url oder dataURL).
dd.export(format?, quality?)Exportiert das aktuelle Ergebnis → Promise<{dataUrl,mime,size}>.
dd.setTheme('dark')Wechselt das Theme zur Laufzeit.
dd.destroy()Hängt das Widget aus (entfernt den iframe).

Ereignis-Callbacks

onReady()Der Editor ist bereit.
onSave(file)Nutzer tippt auf “Fertig” → file.dataUrl ist das bearbeitete Ergebnis.
onError(e)e.message ist menschenlesbar (deaktiviert / nicht autorisiert / Ladefehler).
onClose()Das Vollbild-Overlay wurde geschlossen.

Sicherheit · Automatische Updates

· Selbstbedienung, automatisch freigegeben: Jeder registrierte Nutzer registriert einen Website-Namen + eine Einbettungs-URL in der Konsole, um einen Schlüssel zu erhalten – sofort aktiv.
· Der Public Key ist öffentlich; er wird durch Positiv-/Sperrlisten registrierter URLs gegen Missbrauch geschützt (Sperrliste hat Vorrang); Anfragen von nicht registrierten Domains werden mit dem Hinweis zur Registrierung abgelehnt; jederzeit ein-/ausschaltbar.
· Statistik echter Herkunft: Jeder Ladevorgang wird nach Origin gezählt (auch geblockte); die Konsole zeigt eine Aufschlüsselung pro Origin, und nicht registrierte Domains lassen sich mit einem Tipp auf die Positivliste setzen.
· Der Editor läuft auf der eigenen Domain von TutuEdit (isoliert); deine Seite kann auf keine TutuEdit-Anmeldedaten zugreifen, und die privaten TutuEdit-Werke der Besucher erscheinen nie im Widget.
· Das Widget wird von TutuEdit selbst gehostet und automatisch aktualisiert – Funktions-Upgrades erfordern keine Codeänderungen auf deiner Seite, null Wartung.