공동 편집
여러 사용자가 같은 프레젠테이션을 편집하고 서로의 변경 사항을 확인할 수 있습니다. 공동 편집 통합에 따라 백엔드, 인증, 권한, 저장소를 연결한 다음 라이선스를 설정하세요.
문서 설정 및 로드
협업 빠른 시작을 참고하여 기존 Slides 편집기에 Collaboration Client 설정을 추가하세요. 해당 예제는 Sheets를 사용하므로, 백엔드에서는 Slides 문서를 생성하고 영구 저장한 뒤 그 ID를 브라우저에 반환해야 합니다.
문서를 로드하기 전에 현재 사용자를 설정하세요. 자세한 내용은 공동 편집 통합을 참고하세요.
import '@univerjs-pro/slides/facade'import { UserManagerService } from '@univerjs/core'import '@univerjs-pro/collaboration-client/facade'univer.__getInjector().get(UserManagerService).setCurrentUser({ userID, name, avatar })const document = await univerAPI.getCollaboration().loadSlideAsync('your-document-id')if (!document) throw new Error('Document could not be loaded')문서를 다시 열거나 공유할 때도 동일한 ID를 사용하세요. 서버 문서를 로드하는 대신 로컬의 빈 문서를 만들면 안 됩니다.
동기화 상태, 재전송, 충돌 복구로 저장 상태를 표시하고 새로고침 전에 미확인 변경을 보호하세요.
공동 편집 문서의 기본 URL 로드 기능 제거
주의 사항
1.2.0 버전부터 Univer의 기본 URL 공동 편집 문서 로드 로직이 제거되었습니다. 더 이상 URL의 unit과 type 매개변수를 자동으로 읽어 공동 편집 문서를 로드하지 않습니다.
애플리케이션이 이 동작에 의존한다면 사용자 정의 플러그인으로 복원할 수 있습니다.
사용자 정의 플러그인 연결
아래 네 파일을 다음 디렉터리 구조에 맞춰 프로젝트에 복사하세요.
custom-url-load/├── plugin.ts├── controllers/│ └── data-loader.controller.ts└── services/ ├── url.service.ts └── web-url.service.ts편집기와 공동 편집 플러그인을 초기화한 후 현재 사용자를 설정하고 CustomUrlLoadPlugin을 등록하세요.
import { UserManagerService } from '@univerjs/core'import { CustomUrlLoadPlugin } from './custom-url-load/plugin'univer.__getInjector().get(UserManagerService).setCurrentUser({ userID, name, avatar })univer.registerPlugin(CustomUrlLoadPlugin)등록 후에는 플러그인이 문서를 로드하므로 같은 문서에 대해 loadSlideAsync()을 호출할 필요가 없습니다. 이미 Facade로 문서를 로드하는 애플리케이션이라면 이전 절의 방식을 유지하고 애플리케이션 요구 사항에 맞춰 URL을 처리할 수 있습니다.
전체 플러그인 코드
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'/** * 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()) } }}동기화 및 권한 확인
독립된 두 브라우저 세션에서 같은 ID를 여세요. 한 세션에서 텍스트를 수정하거나 요소를 이동한 뒤 다른 세션에 반영되는지 확인하세요. 페이지 새로 고침, 재연결, 서비스 재시작 후에도 내용이 유지되는지 검증하세요. 보기 전용 계정과 권한이 없는 계정으로 서버가 허용되지 않은 쓰기와 읽기를 거부하는지 확인하세요.
편집 기록과 가져오기 및 내보내기는 별도로 설정해야 합니다. 공동 편집을 도입해도 자동으로 활성화되지는 않습니다.
이 가이드는 어떠셨나요?