TutuDocs · Composant intégrable

Une ligne de code : ajoutez un éditeur de documents à votre site en quelques secondes

Intégrez l'éditeur de documents TutuDocs (mise en page / tableaux / images / plan) à n'importe quel site web. Les visiteurs rédigent des documents directement sur votre site, les thèmes sont configurables et les mises à jour du produit s'appliquent automatiquement — zéro maintenance pour vous.

Copier-coller — avant la balise </body> de votre page
<script src="https://tutudocs.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#tutudocs-editor" defer></script>

Remplacez pk_live_YOUR_KEY par une clé que vous générez vous-même dans la console (tout utilisateur inscrit — sans validation, instantané) ; le conteneur #tutudocs-editor doit avoir une largeur et une hauteur. Enregistrez votre URL d'intégration lors de la configuration (liste d'autorisation ; pour le développement local, utilisez localhost) ; il n'apparaît que sur les sites que vous enregistrez.

Essayer en direct

Cliquez sur le bouton ci-dessous pour essayer le éditeur de documents intégré ici même.

API JS (pour les rappels / la personnalisation)

<script src="https://tutudocs.com/embed.js"></script>
<script>
  const editor = TutuDocs.mount('#tutudocs-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = the exported Word document (.docx, base64)
      upload(file.dataUrl);
    }
  });
  // After the user clicks Done, onSave returns the .docx; or call it directly:
  // const { dataUrl } = await editor.export();
</script>

Options de configuration complètes

ParamètreTypeDescription
keystringVotre 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.
saveTextstringLibellé du bouton « Terminé » (par défaut « Terminer et renvoyer », ≤16 caractères). Affiché dans la barre supérieure native de l'éditeur (à côté de Partager/Historique).
hideSuitebooleanMasque le lanceur de la suite (masqué par défaut lors de l'intégration pour réduire les distractions).

Méthodes

  • editor.export()Exporte le document actuel au format .docx → Promise<{dataUrl,mime,size}>.
  • editor.setTheme('dark')Changer de thème à l'exécution.
  • editor.destroy()Démonte le composant (supprime l'iframe).

Rappels d'événements

  • onReady()L'éditeur est prêt.
  • onSave(file)L'utilisateur clique sur « Terminé » → file.dataUrl est le document Word exporté (.docx).
  • onError(e)e.message est en langage clair (non activé / pas d'autorisation / échec du chargement).
  • onClose()La surcouche plein écran a été fermée.

Sécurité · Mises à jour automatiques

  • · Libre-service, validation automatique : tout utilisateur inscrit enregistre un nom de site + une URL d'intégration dans la console et obtient une clé opérationnelle instantanément.
  • · La clé est publique ; une liste d'autorisation/refus d'URL enregistrées empêche tout usage abusif (la liste de refus l'emporte). Les domaines non enregistrés sont refusés avec une invite à les enregistrer ; vous pouvez suspendre ou reprendre à tout moment.
  • · Statistiques d'origine réelles : chaque chargement est comptabilisé par Origin (y compris ceux bloqués) ; la console affiche un détail par origine, et vous pouvez autoriser un domaine non enregistré en un clic.
  • · L'éditeur s'exécute sur le domaine propre de TutuDocs (isolé) ; votre page ne peut accéder à aucun identifiant TutuDocs, et les documents privés TutuDocs d'un visiteur n'apparaissent jamais dans le composant intégré.
  • · Le composant est auto-hébergé et mis à jour automatiquement par TutuDocs —— les évolutions de fonctionnalités ne nécessitent aucune modification de code de votre côté ; zéro maintenance.