# 協同編輯

- Human documentation: [https://docs.univer.ai/zh-TW/guides/pdfs/features/collaboration](https://docs.univer.ai/zh-TW/guides/pdfs/features/collaboration)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/pdfs/features/collaboration.md](https://docs.univer.ai/zh-TW/guides/pdfs/features/collaboration.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [pdfs/features/collaboration.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/features/collaboration.zh-TW.mdx)

---

請從[協同整合](https://docs.univer.ai/zh-TW/server/collaboration/browser-integration.md)開始，依序執行範例、接入業務、驗證持久化和權限。實作細節與可執行的 Web/Server 範例請見 [協同快速開始](https://docs.univer.ai/zh-TW/server/collaboration/quick-start.md)。

先由經過認證的業務 API 呼叫 Collaboration Service 建立 Unit，再於瀏覽器載入回傳的識別碼。依[快速開始](https://docs.univer.ai/zh-TW/server/collaboration/quick-start.md)一起設定 HTTP、Session Ticket 和 WebSocket，以 Database Adapter 持久化，並透過[伺服器端 Middleware](https://docs.univer.ai/zh-TW/server/collaboration/identity-and-authorization.md)分別檢查讀取、JOIN 和修改權限。

> [!NOTE]
> 使用這些 API 前，請先確認目標伺服器支援 PDF Unit；Sheets 協同範例成功執行不代表已支援 PDF。

## 載入協作 PDF

透過伺服器 API 或 `importPdfToUnitIdAsync` 建立 PDF 單元後，使用協作 Facade 載入：

先設定目前使用者，再載入文件；詳見[協同整合](https://docs.univer.ai/zh-TW/server/collaboration/browser-integration.md)。

```ts
import { UserManagerService } from '@univerjs/core'
import '@univerjs-pro/collaboration-client/facade'

univer.__getInjector().get(UserManagerService).setCurrentUser({ userID, name, avatar })

const pdf = await univerAPI.getCollaboration().loadPdfAsync(unitId)

if (!pdf) {
  throw new Error(`PDF unit not found: ${unitId}`)
}

console.log(pdf.getId(), pdf.getName())
```

`loadPdfAsync` 會載入伺服器快照、準備協作工作階段並傳回 `FPdf`。當單元無法與 PDF 關聯時，它會傳回 `null`。

透過[同步狀態、重送與衝突復原](https://docs.univer.ai/zh-TW/server/collaboration/browser-integration.md#sync-status)實作儲存提示，並在重新整理前保護尚未確認的修改。

## 移除內建 URL 載入協同文件

> [!WARNING: 注意事項]
> 從 **1.2.0** 版本開始，Univer 移除了內建的 URL 協同文件載入邏輯，不再自動讀取 URL 中的 `unit` 和 `type` 參數來載入協同文件。

如果你的應用程式依賴這項行為，可以透過自訂外掛恢復。

### 接入自訂外掛

將下方四個檔案依照以下目錄結構複製到專案中：

```text
custom-url-load/
├── plugin.ts
├── controllers/
│   └── data-loader.controller.ts
└── services/
    ├── url.service.ts
    └── web-url.service.ts
```

完成編輯器和協同外掛初始化後，先設定目前使用者，再註冊 `CustomUrlLoadPlugin`。

```ts
import { UserManagerService } from '@univerjs/core'
import { CustomUrlLoadPlugin } from './custom-url-load/plugin'

univer.__getInjector().get(UserManagerService).setCurrentUser({ userID, name, avatar })

univer.registerPlugin(CustomUrlLoadPlugin)
```

註冊此外掛後，由外掛負責載入文件，無需再為同一份文件呼叫 `loadPdfAsync()`。如果應用程式已透過 Facade 載入文件，可以繼續使用上一節的方式，並依業務需求自行處理 URL。

### 完整外掛程式碼

#### plugin.ts

```ts
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))
  }
}
```

#### controllers/data-loader.controller.ts

```ts
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)
      })
  }
}
```

#### services/url.service.ts

```ts
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')
```

#### services/web-url.service.ts

```ts
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())
    }
  }
}
```