Colaboración
Permite que los usuarios abran la misma Base y editen juntos tablas, campos, registros y vistas. Pueden trabajar en vistas diferentes mientras modifican el mismo documento.
Pasos de integración
- Sigue la integración de colaboración para ejecutar el ejemplo y conectar el inicio de sesión, los permisos y el almacenamiento en la base de datos.
- Añade la configuración del cliente Collaboration al editor Bases existente. Sigue el inicio rápido de Office para configurar el navegador, pero crea y almacena documentos Bases en lugar de copiar los datos Sheets del ejemplo.
- Crea la Base mediante el backend de tu aplicación y devuelve su ID al navegador.
Abrir una Base del servidor
Establece el usuario actual antes de cargar el documento. Consulta Integración de colaboración.
import '@univerjs-pro/bases/facade'import { UserManagerService } from '@univerjs/core'import '@univerjs-pro/collaboration-client/facade'univer.__getInjector().get(UserManagerService).setCurrentUser({ userID, name, avatar })const base = await univerAPI.getCollaboration().loadBaseAsync('your-base-id')if (!base) throw new Error('Base could not be loaded')Reutiliza el ID al volver a abrir o compartir el documento. No sustituyas la carga desde el servidor por createBase() y un documento local vacío nuevo.
Usa estado, reenvíos y recuperación de conflictos para indicar el guardado y proteger cambios sin confirmar antes de recargar.
Eliminación de la carga integrada por URL de documentos colaborativos
Nota
A partir de la versión 1.2.0, Univer ha eliminado la carga integrada por URL de documentos colaborativos. Ya no lee automáticamente los parámetros unit y type de la URL para cargar un documento colaborativo.
Si tu aplicación depende de este comportamiento, puedes recuperarlo mediante un plugin personalizado.
Integrar el plugin personalizado
Copia los cuatro archivos siguientes en tu proyecto con esta estructura de directorios:
custom-url-load/├── plugin.ts├── controllers/│ └── data-loader.controller.ts└── services/ ├── url.service.ts └── web-url.service.tsDespués de inicializar el editor y los plugins de colaboración, establece el usuario actual antes de registrar CustomUrlLoadPlugin.
import { UserManagerService } from '@univerjs/core'import { CustomUrlLoadPlugin } from './custom-url-load/plugin'univer.__getInjector().get(UserManagerService).setCurrentUser({ userID, name, avatar })univer.registerPlugin(CustomUrlLoadPlugin)Una vez registrado, el plugin carga el documento, por lo que no necesitas llamar a loadBaseAsync() para el mismo documento. Si tu aplicación ya carga documentos mediante la Facade, puedes mantener el enfoque de la sección anterior y gestionar las URL según las necesidades de tu aplicación.
Código completo del plugin
import { UniverCollaborationClientPlugin } from '@univerjs-pro/collaboration-client'import { DependentOn, Inject, Injector, Plugin } from '@univerjs/core'import { CollaborationDataLoaderController } from './controllers/data-loader.controller'import { IURLService } from './services/url.service'import { WebURLService } from './services/web-url.service'@DependentOn(UniverCollaborationClientPlugin)export class CustomUrlLoadPlugin extends Plugin { static override pluginName = 'CUSTOM_URL_LOAD_PLUGIN' constructor( _config: undefined, @Inject(Injector) protected override readonly _injector: Injector ) { super() } override onStarting(): void { this._injector.add([IURLService, { useClass: WebURLService }]) this._injector.add([CollaborationDataLoaderController]) this.disposeWithMe(this._injector.get(IURLService)) this.disposeWithMe(this._injector.get(CollaborationDataLoaderController)) }}import { DataLoaderService } from '@univerjs-pro/collaboration-client'import { ILogService, Inject, RxDisposable } from '@univerjs/core'import { IURLService } from '../services/url.service'/** * Carga un documento colaborativo desde los parámetros de la URL. */export class CollaborationDataLoaderController extends RxDisposable { constructor( @IURLService private readonly _urlService: IURLService, @ILogService private readonly _logService: ILogService, @Inject(DataLoaderService) private readonly _dataLoaderService: DataLoaderService ) { super() const unitId = this._urlService.getParam('unit') const type = this._urlService.getParam('type') if (!unitId || !type) { return } this._dataLoaderService.loadUnit(unitId, Number(type)) .catch((error: unknown) => { this._logService.error('[CollaborationDataLoaderController]', error) }) }}import type { IDisposable } from '@univerjs/core'import type { Observable } from 'rxjs'import { createIdentifier } from '@univerjs/core'export interface IURLService extends IDisposable { getParam: (key: string) => string | undefined setParam: (key: string, value: string, useReplace?: boolean) => void removeParam: (key: string, useReplace?: boolean) => void readonly urlChange$: Observable<void>}export const IURLService = createIdentifier<IURLService>('demo.custom-url-load.url-service')import type { IURLService } from './url.service'import { RxDisposable } from '@univerjs/core'import { fromEvent, map, shareReplay, takeUntil } from 'rxjs'export class WebURLService extends RxDisposable implements IURLService { readonly urlChange$ = fromEvent(window, 'popstate').pipe( map(() => undefined), takeUntil(this.dispose$), shareReplay({ bufferSize: 1, refCount: true }) ) getParam(key: string): string | undefined { return new URL(window.location.href).searchParams.get(key) ?? undefined } setParam(key: string, value: string, useReplace = false): void { const url = new URL(window.location.href) url.searchParams.set(key, value) this._updateUrl(url, useReplace) } removeParam(key: string, useReplace = false): void { const url = new URL(window.location.href) url.searchParams.delete(key) this._updateUrl(url, useReplace) } private _updateUrl(url: URL, useReplace: boolean): void { if (useReplace) { window.history.replaceState(window.history.state, '', url.toString()) } else { window.history.pushState(window.history.state, '', url.toString()) } }}Verificar la sincronización y el guardado
Abre el mismo ID en dos sesiones independientes del navegador. Añade un registro o modifica un campo en una y comprueba que la otra reciba el cambio. Verifica que las modificaciones se conserven tras actualizar y reiniciar el servidor.
Controla en el servidor el acceso de lectores y usuarios sin autorización. Los ajustes locales de solo lectura solo controlan el editor. La conversión de archivos, los comentarios y el historial necesitan sus respectivas funciones de backend; consulta Importación y exportación, Comentarios e Historial.
¿Cómo es esta guía?