TutuEdit · Widget incrustable

Una línea de código:añade un editor de imágenes a tu sitio en segundos

Integra el editor profesional de TutuEdit (recorte / filtros / recorte de fondo / texto) en cualquier sitio web. Los visitantes editan fotos directamente en tu sitio; configura el tema y las herramientas, y las actualizaciones del producto se aplican automáticamente sin mantenimiento.

Pruébalo en vivo Ver código de integración Generar una clave (sin revisión)

Listo para copiar y pegar · pégalo antes del </body> de tu sitio

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

Reemplaza pk_live_TU_CLAVE por la clave pública que generas tú mismo en la consola (cualquier usuario registrado, sin revisión, al instante); el contenedor #dd-editor necesita un ancho y un alto. Al integrar, registra tus URL de inserción (lista de permitidos; para desarrollo local usa localhost); solo se muestra en los sitios que hayas registrado.

Pruébalo en vivo

Toca el botón de abajo para probar el editor de imágenes integrado en esta misma página.

JS API (para callbacks / personalización)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_TU_CLAVE',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = la imagen editada (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // abrir una imagen
</script>

Configuración completa

Parámetro	Tipo	Descripción
key	string	Tu clave pública pk_ (generada en la consola). Obligatorio.
theme	'auto'\|'light'\|'dark'	Tema; auto sigue el modo claro u oscuro del host/sistema.
hideToolbar	boolean	Oculta la barra de herramientas izquierda (escenarios de vista minimalista / exportación con un toque).
hideHeader	boolean	Oculta la barra superior (cuando creas tu propia UI y exportas con export()).
hideOpen	boolean	Oculta el botón “Abrir imagen” (solo permite imágenes mediante dd.open).
hideExport	boolean	Oculta el botón “Exportar y descargar” (usa solo “Listo y devolver”).
saveText	string	Texto del botón “Listo” (por defecto “Listo y devolver”, ≤16 caracteres).
exportFormat	'png'\|'jpg'\|'webp'	Formato de exportación al finalizar.
exportQuality	number 0..1	Calidad JPG/WebP.

Métodos

dd.open(url, name?)Abre una imagen en el editor (url o dataURL).
dd.export(format?, quality?)Exporta el resultado actual → Promise<{dataUrl,mime,size}>.
dd.setTheme('dark')Cambia el tema en tiempo de ejecución.
dd.destroy()Desmonta el widget (elimina el iframe).

Callbacks de eventos

onReady()El editor está listo.
onSave(file)El usuario toca “Listo” → file.dataUrl es el resultado editado.
onError(e)e.message es legible para humanos (desactivado / sin autorización / error de carga).
onClose()Se cerró la superposición a pantalla completa.

Seguridad · Actualizaciones automáticas

· Autoservicio, aprobación automática: cualquier usuario registrado registra un nombre de sitio + URL de inserción en la consola para obtener una clave, efectiva al instante.
· La clave pública es pública; está protegida por listas de URL registradas permitidas/bloqueadas contra el uso indebido (la lista de bloqueo prevalece); las solicitudes de dominios no registrados se rechazan con un aviso para registrarse; actívalo o desactívalo cuando quieras.
· Analítica de origen real: cada carga se contabiliza por Origin (también las bloqueadas); la consola muestra un desglose por origen y los dominios no registrados se pueden añadir a la lista de permitidos con un toque.
· El editor se ejecuta en el propio dominio de TutuEdit (aislado); tu página no puede acceder a ninguna credencial de TutuEdit, y las obras privadas de TutuEdit de los visitantes nunca aparecen en el widget.
· El widget está autoalojado y actualizado automáticamente por TutuEdit: las mejoras de funciones no requieren cambios de código de tu parte, cero mantenimiento.