Web SDK

Historial de edición

Información de complementos

Después de modificar texto, formas o el orden de las diapositivas, abre el historial para consultar versiones anteriores, comparar cambios y restaurar una versión si tienes permiso. El historial lee las versiones guardadas de forma persistente en el servidor. Deshacer y rehacer se aplican a la sesión de edición actual y no necesitan un servicio de historial.

Preparar los servicios de colaboración e historial

Completa la integración de colaboración y la configuración de la licencia. Verifica que dos sesiones puedan editar el mismo documento Slides y que los cambios se conserven al recargar.

Sigue las extensiones de colaboración de Office y el ejemplo de historial para conectar el almacenamiento del historial y los permisos. La colaboración básica no activa automáticamente el historial. El backend también debe admitir listas de versiones, su contenido y su restauración.

Añadir los plugins de historial

Añade lo siguiente a la configuración existente del producto, la licencia y la colaboración. Si un preset o una configuración existente ya registra estos plugins, modifica esa configuración en lugar de registrarlos dos veces.

Shell
pnpm add @univerjs-pro/edit-history @univerjs-pro/edit-history-ui @univerjs-pro/slides-history @univerjs-pro/slides-history-ui
TypeScript
import { UniverEditHistoryPlugin } from '@univerjs-pro/edit-history'import EditHistoryLocale from '@univerjs-pro/edit-history-ui/locale/en-US'import { UniverSlidesHistoryPlugin } from '@univerjs-pro/slides-history'import { UniverSlidesHistoryUIPlugin } from '@univerjs-pro/slides-history-ui'import HistoryLocale from '@univerjs-pro/slides-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(UniverSlidesHistoryPlugin)univer.registerPlugin(UniverSlidesHistoryUIPlugin, {  univerContainerId: 'app',  historyServerUrl,})

Sustituye /api/history por el endpoint de historial de tu aplicación y comprueba que su API corresponda a las solicitudes del cliente. Mantén idénticos ambos valores de historyServerUrl. Configura univerContainerId con el ID DOM del contenedor del editor y carga el idioma que corresponda al editor.

El visor del historial crea un editor independiente de solo lectura. Para contenido personalizado, utiliza viewerPlugins para añadir plugins que el visor no incluya ya. No vuelvas a registrar los plugins integrados en el visor.

Consultar y restaurar versiones

Abre el historial desde el menú del editor y selecciona una versión para consultar su contenido y cambios. Restaurar modifica el documento compartido actual. Solo los usuarios con permiso de restauración deben poder hacerlo, y el servidor debe imponer ese permiso.

Para verificar la integración, modifica texto, formas o el orden de las diapositivas, espera la confirmación de la colaboración y consulta la lista de versiones y su contenido. Vuelve a abrir la aplicación y reinicia el servicio para comprobar la persistencia. Restaura una versión anterior y verifica que otra sesión del navegador reciba el estado restaurado.

Si la lista está vacía, comprueba si se ha registrado historial para el documento y revisa su ID y la URL del servicio. Si puedes consultar pero no restaurar, revisa los permisos de restauración y la conexión de colaboración. Leer el historial también requiere autorización, ya que las versiones anteriores pueden contener datos que se hayan eliminado posteriormente.

Comparar snapshots

Para crear una pantalla de revisión o proporcionar cambios a un AI Agent, usa compareUnitData() o prepara el resultado una sola vez con prepareUnitComparison(). Registra el plugin History del producto e importa la entrada Facade. Proporciona dos snapshots completos del mismo documento en beforeSnapshot y afterSnapshot. Esta comparación de solo lectura no necesita un servicio de historial y no restaura ni combina contenido.

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_SLIDE,  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)

Lee scopes para obtener las vistas disponibles y pasa un ámbito a query() para filtrar sin recalcular las diferencias. Cada página devuelve 100 elementos de forma predeterminada, con un máximo de 1.000. Usa page.hasMore y offset para continuar. summary describe siempre la comparación completa, incluso al filtrar elementos. Comprueba diagnostics.readiness y diagnostics.codes antes de tratar el resultado como completo. Para Node.js o una CLI sin editor, consulta la API de comparación sin interfaz.

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.