编辑历史

预设模式插件模式

预设信息

@univerjs/preset-docs-collaboration

需要服务端支持

是

注意事项

编辑历史功能需要 Univer 服务端支持，请确保你已经正确安装并配置了 Univer 服务端。具体请参考：升级到 Pro

编辑历史功能允许用户查看和恢复文档的历史版本，支持多种过滤和搜索方式，帮助用户高效管理文档内容。

预设模式

安装

@univerjs/preset-sheets-advanced 的 UniverSheetsAdvancedPreset 预设在运行时依赖 UniverSheetsDrawingPreset 预设，请先安装 @univerjs/preset-sheets-drawing。

npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

使用

import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'
import UniverPresetSheetsAdvancedZhCN from '@univerjs/preset-sheets-advanced/locales/zh-CN'
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'
import UniverPresetSheetsDrawingZhCN from '@univerjs/preset-sheets-drawing/locales/zh-CN'
import { createUniver, LocaleType, merge } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css'
import '@univerjs/preset-sheets-advanced/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge(
      {},
      UniverPresetSheetsCoreZhCN,
      UniverPresetSheetsDrawingZhCN, 
      UniverPresetSheetsAdvancedZhCN, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset(), 
    UniverSheetsAdvancedPreset({ 
      universerEndpoint: 'http://localhost:3010', 
    }), 
  ],
})

如果你拥有 Univer 的商业许可证，请参考在客户端使用许可证进行配置。

预设与配置

UniverSheetsAdvancedPreset 配置项：

interface IUniverSheetsAdvancedPresetConfig {
  // Univer Server 的端口地址
  universerEndpoint?: string
  exchangeClientOptions?: {
    // 导入后工作表的最小行数
    minSheetRowCount?: number
    // 导入后工作表的最小列数
    minSheetColumnCount?: number
  }
}

插件模式

安装

npm install @univerjs-pro/edit-history-viewer @univerjs-pro/edit-history-loader

使用

import { UniverEditHistoryLoaderPlugin } from '@univerjs-pro/edit-history-loader'
import EditHistoryViewerZhCN from '@univerjs-pro/edit-history-viewer/locale/zh-CN'
import { LocaleType, merge, Univer } from '@univerjs/core'

import '@univerjs-pro/edit-history-viewer/lib/index.css'

const univer = new Univer({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge(
      {},
      EditHistoryViewerZhCN, 
    ),
  },
})

univer.registerPlugin(UniverEditHistoryLoaderPlugin, { 
  univerContainerId: 'your-univer-container-id', 
})

如果你拥有 Univer 的商业许可证，请参考在客户端使用许可证进行配置。

插件与配置

UniverExchangeClientPlugin 配置项：

interface IUniverExchangeClientConfig {
  // Univer Server 的配置
  downloadEndpointUrl?: string
  uploadFileServerUrl?: string
  importServerUrl?: string
  exportServerUrl?: string
  getTaskServerUrl?: string
  signUrlServerUrl?: string
  // 最大超时时间，单位为毫秒
  maxTimeoutTime?: number
  options?: {
    // 导入后工作表的最小行数
    minSheetRowCount?: number
    // 导入后工作表的最小列数
    minSheetColumnCount?: number
  }
}

启动历史记录时，UniverEditHistoryLoaderPlugin 会加载一个新的 Univer 实例挂载指定 DOM 节点上。因此在注册时，需要提供合适的 DOM 节点 id（如原 Univer 实例的 Container），以达到历史记录面板覆盖原 Univer 面板的目的。若节点 id 未指定，则默认为 univer-container。

Feature 适配

历史记录的 Univer 实例中只会默认加载官方的 Plugin。为业务需求开发的第三方 Feature Plugin 需要被注册到 HistoryLoaderService 后，才会被正确的显示在历史记录中。

对已经内置注册的官方 Plugin，也可以修改其配置。

在 HistoryLoaderService 中，你还可以获取或订阅历史记录的 Univer 实例，用于支持更多的拓展操作。

import { HistoryLoaderService } from '@univerjs-pro/edit-history-loader'
// Presets 引入: import { HistoryLoaderService } from '@univerjs/preset-sheets-collaboration';

const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
  if (stage === univerAPI.Enum.LifecycleStages.Steady) {
    const injector = univer.__getInjector()
    const historyLoaderService = injector.get(HistoryLoaderService)

    // 和 PluginService 的注册方式一致，历史记录的 Univer 实例在新建后会按照以下配置来注册对应 Plugin
    historyLoaderService.registerPlugin(YourPlugin, YourPluginConfig)
    // 配置官方已注册的 Plugin, 需设置 true 参数表示覆盖原配置
    historyLoaderService.registerPlugin(ExamplePlugin, ExamplePluginConfig, true)

    // 如果加载了历史记录，则可以直接获取到历史记录的 Univer 实例
    const historyUniver = historyLoaderService.historyUniver
  }
})

// 移除事件监听器，使用 `disposable.dispose()`

目录