TutuEdit · Widget intégrable

Une ligne de code :ajoutez un éditeur d'images à votre site en quelques secondes

Intégrez l'éditeur professionnel de TutuEdit (recadrage / filtres / détourage / texte) dans n'importe quel site web. Les visiteurs retouchent leurs photos directement sur votre site ; configurez le thème et les outils, et les mises à jour du produit s'appliquent automatiquement, sans maintenance.

Essayer en direct Voir le code d'intégration Générer une clé (sans validation)

Prêt à copier-coller · collez-le avant le </body> de votre site

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

Remplacez pk_live_VOTRE_CLE par la clé publique que vous générez vous-même dans la console (tout utilisateur inscrit — sans validation, instantané) ; le conteneur #dd-editor doit avoir une largeur et une hauteur. Lors de l'intégration, enregistrez vos URL d'intégration (liste d'autorisation ; pour le développement local, utilisez localhost) ; il ne s'affiche que sur les sites que vous avez enregistrés.

Essayer en direct

Appuyez sur le bouton ci-dessous pour essayer l'éditeur d'images intégré directement sur cette page.

JS API (pour les callbacks / la personnalisation)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_VOTRE_CLE',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = l'image éditée (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // ouvrir une image
</script>

Configuration complète

Paramètre	Type	Description
key	string	Votre clé publique pk_ (générée dans la console). Obligatoire.
theme	'auto'\|'light'\|'dark'	Thème ; auto suit le mode clair ou sombre de l'hôte/système.
hideToolbar	boolean	Masque la barre d'outils de gauche (scénarios de vue minimaliste / export en un geste).
hideHeader	boolean	Masque la barre supérieure (lorsque vous créez votre propre UI et exportez via export()).
hideOpen	boolean	Masque le bouton “Ouvrir l’image” (n’autorise les images que via dd.open).
hideExport	boolean	Masque le bouton “Exporter et télécharger” (utilisez uniquement “Terminer et renvoyer”).
saveText	string	Libellé du bouton “Terminer” (par défaut “Terminer et renvoyer”, ≤16 caractères).
exportFormat	'png'\|'jpg'\|'webp'	Format d'export à la fin.
exportQuality	number 0..1	Qualité JPG/WebP.

Méthodes

dd.open(url, name?)Ouvre une image dans l'éditeur (url ou dataURL).
dd.export(format?, quality?)Exporte le résultat actuel → Promise<{dataUrl,mime,size}>.
dd.setTheme('dark')Change le thème à l'exécution.
dd.destroy()Démonte le widget (supprime l'iframe).

Callbacks d'événements

onReady()L'éditeur est prêt.
onSave(file)L’utilisateur appuie sur “Terminer” → file.dataUrl est le résultat édité.
onError(e)e.message est lisible par un humain (désactivé / non autorisé / échec de chargement).
onClose()La superposition en plein écran a été fermée.

Sécurité · Mises à jour automatiques

· En libre-service, approuvé automatiquement : tout utilisateur inscrit enregistre un nom de site + une URL d'intégration dans la console pour obtenir une clé, active immédiatement.
· La clé publique est publique ; elle est protégée par des listes d'URL enregistrées autorisées/bloquées contre les usages abusifs (la liste de blocage l'emporte) ; les requêtes provenant de domaines non enregistrés sont rejetées avec une invite à s'enregistrer ; activable/désactivable à tout moment.
· Statistiques d'origine réelle : chaque chargement est comptabilisé par Origin (les bloqués aussi) ; la console affiche une répartition par origine, et les domaines non enregistrés peuvent être autorisés en un geste.
· L'éditeur s'exécute sur le domaine propre de TutuEdit (isolé) ; votre page ne peut accéder à aucun identifiant TutuEdit, et les créations privées TutuEdit des visiteurs n'apparaissent jamais dans le widget.
· Le widget est auto-hébergé et mis à jour automatiquement par TutuEdit — les évolutions de fonctionnalités ne nécessitent aucune modification de code de votre côté, zéro maintenance.