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.
</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è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. |
| saveText | string | Libellé 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). |
| hideSuite | boolean | Masque 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.