Web SDK

Historique des modifications

Après avoir modifié des paragraphes, la mise en forme ou des tableaux, ouvrez l’historique pour consulter les versions précédentes, comparer les changements et restaurer une version si vous en avez le droit. L’historique lit les versions conservées sur le serveur. Annuler et rétablir s’appliquent à la session d’édition en cours et ne nécessitent pas de service d’historique.

Préparer les services de collaboration et d’historique

Terminez l’intégration collaborative et la configuration de la licence. Vérifiez que deux sessions peuvent modifier le même document Docs et que les changements persistent après rechargement.

Suivez les extensions collaboratives Office et l’exemple d’historique pour connecter le stockage de l’historique et les autorisations. La collaboration de base n’active pas automatiquement l’historique. Le backend doit également prendre en charge la liste des versions, leur contenu et leur restauration.

Ajouter les plugins d’historique

Ajoutez cette configuration à votre configuration existante du produit, de la licence et de la collaboration. Si un préréglage ou une configuration existante enregistre déjà ces plugins, modifiez cette configuration au lieu de les enregistrer deux fois.

Shell
pnpm add @univerjs-pro/edit-history @univerjs-pro/edit-history-ui @univerjs-pro/docs-history @univerjs-pro/docs-history-ui
TypeScript
import { UniverEditHistoryPlugin } from '@univerjs-pro/edit-history'import EditHistoryLocale from '@univerjs-pro/edit-history-ui/locale/en-US'import { UniverDocsHistoryPlugin } from '@univerjs-pro/docs-history'import { UniverDocsHistoryUIPlugin } from '@univerjs-pro/docs-history-ui'import HistoryLocale from '@univerjs-pro/docs-history-ui/locale/en-US'import { LocaleType, mergeLocales } from '@univerjs/core'import '@univerjs-pro/edit-history-ui/lib/index.css'const historyServerUrl = '/api/history'univerAPI.loadLocales(LocaleType.EN_US, mergeLocales(EditHistoryLocale, HistoryLocale))univer.registerPlugin(UniverEditHistoryPlugin, { historyServerUrl })univer.registerPlugin(UniverDocsHistoryPlugin)univer.registerPlugin(UniverDocsHistoryUIPlugin, {  univerContainerId: 'app',  historyServerUrl,})

Remplacez /api/history par l’endpoint d’historique de votre application et vérifiez que son API correspond aux requêtes du client. Les deux valeurs historyServerUrl doivent être identiques. Définissez univerContainerId sur l’ID DOM du conteneur de l’éditeur et chargez la langue correspondant à l’éditeur.

La visionneuse d’historique crée un éditeur distinct en lecture seule. Pour du contenu personnalisé, utilisez viewerPlugins afin d’ajouter les plugins qui ne sont pas déjà inclus dans la visionneuse. N’enregistrez pas une seconde fois les plugins intégrés.

Consulter et restaurer des versions

Ouvrez l’historique depuis le menu de l’éditeur et sélectionnez une version pour examiner son contenu et ses changements. Une restauration modifie le document partagé actuel. Seuls les utilisateurs disposant du droit de restauration doivent pouvoir l’effectuer, et le serveur doit faire respecter ce droit.

Pour vérifier l’intégration, modifiez des paragraphes, la mise en forme ou des tableaux, attendez la confirmation de la collaboration, puis examinez la liste des versions et leur contenu. Rouvrez l’application et redémarrez le service pour vérifier la persistance. Restaurez une ancienne version et vérifiez qu’une autre session de navigateur reçoit l’état restauré.

Si la liste est vide, vérifiez d’abord qu’un historique a été enregistré pour ce document, puis contrôlez son ID et l’URL du service. Si la consultation fonctionne mais pas la restauration, vérifiez les droits de restauration et la connexion collaborative. La lecture de l’historique nécessite aussi une autorisation, car les anciennes versions peuvent contenir des données supprimées depuis.

Comparer des snapshots

Pour créer une interface de révision ou transmettre les changements à un AI Agent, utilisez compareUnitData(), ou préparez le résultat une seule fois avec prepareUnitComparison(). Enregistrez le plugin History du produit et importez son entrée Facade. Fournissez deux snapshots complets du même document dans beforeSnapshot et afterSnapshot. Cette comparaison en lecture seule ne nécessite aucun service d’historique et ne restaure ni ne fusionne le contenu.

TypeScript
import { UnitComparisonDetailLevel, UnitComparisonFidelity } from '@univerjs-pro/edit-history'import { UniverInstanceType } from '@univerjs/core'import '@univerjs-pro/edit-history/facade'const comparison = univerAPI.prepareUnitComparison({  comparisonId: 'review-1',  unitId: beforeSnapshot.id,  type: UniverInstanceType.UNIVER_DOC,  fidelity: UnitComparisonFidelity.SNAPSHOT,  leftData: beforeSnapshot,  rightData: afterSnapshot,})const overview = comparison.query({ detail: UnitComparisonDetailLevel.SUMMARY })const scope = overview.scopes[0]const page = comparison.query({ scope, offset: 0, limit: 100 })console.log(page.items, page.page.hasMore, page.diagnostics)

Lisez scopes pour découvrir les vues, puis transmettez une portée à query() pour filtrer sans recalculer les différences. La pagination renvoie 100 éléments par défaut, avec un maximum de 1 000. Utilisez page.hasMore et offset pour la suite. summary décrit toujours la comparaison entière, même après filtrage. Vérifiez diagnostics.readiness et diagnostics.codes avant de considérer le résultat comme complet. Pour Node.js ou une CLI sans éditeur, consultez l’API de comparaison sans interface.

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.