Univer 文档编辑器快速集成指南univerjs/preset-docs-core 预设包详解【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univeruniverjs/preset-docs-core是 Univer 官方提供的文档Docs核心预设包它把文档编辑所需的插件、UI 组件、渲染引擎与公式引擎打包成一个可直接挂载到createUniver()的预设Preset让开发者只需几行代码即可在 Web 端启动一个完整的文档编辑器。本文将从安装、配置、源码实现到协作模式完整讲解该预设包的使用方法与底层原理读完即可在自己的项目中落地一个可运行的 Univer Docs 编辑器。包概览根据 preset-docs-core/README.md 的官方说明univerjs/preset-docs-core为 Univer 文档编辑与 UI 功能提供开箱即用的预设能力其特性一览如下PackageCSSLocalesFacade entryuniverjs/preset-docs-coreYesYesYesCSS包内含样式资源发布配置中sideEffects: [*.css]见 package.json引入后无需再手动加载组件样式Locales提供多语言资源可通过univerjs/preset-docs-core/locales/*子路径按需加载如locales/zh-CNFacade entry导出 Facade 层类型与 API便于通过univerAPI即FUniver以命令式方式操作文档。此外从 src/index.ts 可以看到包的入口还统一转出了univerjs/design、univerjs/docs、univerjs/docs-ui、univerjs/engine-formula、univerjs/engine-render、univerjs/network、univerjs/ui等底层包开发者无需分别记忆各包的导入路径。安装使用 pnpm 或 npm 安装即可pnpm add univerjs/preset-docs-core # or npm install univerjs/preset-docs-core重要版本约束官方要求所有univerjs/*包保持在同一版本README 原文 Keep alluniverjs/*packages on the same version.。由于预设包内部以workspace:*依赖的方式锁定了一批univerjs子包见 package.json 的dependencies字段混用不同版本可能造成插件标识或依赖注入不匹配的问题。同时需要注意 peerDependencies 声明见 package.jsonreact^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rcreact-dom同上范围rxjs7.0.0安装时需保证宿主环境满足上述 React 与 RxJS 版本要求。快速上手用 createUniver 启动文档编辑器README 给出的最小用法如下import { UniverDocsCorePreset } from univerjs/preset-docs-core; // 配合 createUniver 使用 // createUniver({ presets: [UniverDocsCorePreset()] });将这一模式落地为可直接运行的完整示例可以参考仓库中的官方演示 examples/src/preset-docs-core/main.ts其中演示了完整的多语言、主题与多预设组合的初始化流程import { createUniver, defaultTheme, LocaleType, LogLevel, mergeLocales, UniverInstanceType } from univerjs/presets; import { UniverDocsCorePreset } from univerjs/preset-docs-core; import UniverPresetDocsCoreZhCN from univerjs/preset-docs-core/locales/zh-CN; import { DEFAULT_DOCUMENT_DATA_SIMPLE } from univerjs/mockdata; import ../global.css; const { univer, univerAPI } createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetDocsCoreZhCN, // 可按需合并其他预设的语言包例如绘图、超链接、评论等 ), }, theme: defaultTheme, logLevel: LogLevel.VERBOSE, presets: [ UniverDocsCorePreset({ container: app, }), ], }); univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_SIMPLE); window.univer univer; window.univerAPI univerAPI;几个关键点说明createUniver返回{ univer, univerAPI }两个对象univer是核心实例用于注册单位UnituniverAPI即FUniver是 Facade 门面提供更友好的命令式 API通过univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_SIMPLE)创建一个文档单位。初始文档数据DEFAULT_DOCUMENT_DATA_SIMPLE来自 common/mockdata/src/docs/default-document.data-simple.ts仓库还提供了中英文、Dreamer 等多个内置样例数据见 common/mockdata/src/docs 目录container: app表示编辑器将挂载到页面中idapp的 DOM 节点上这也是container配置项的默认值见下文源码分析。配置项详解IUniverDocsCorePresetConfigUniverDocsCorePreset接收一个可选的配置对象其类型定义位于 presets/packages/preset-docs-core/src/preset.tsexport interface IUniverDocsCorePresetConfig extends PickIUniverUIConfig, container | header | footer | toolbar | ribbonType | menu | contextMenu | disableAutoFocus { collaboration?: true; } export function UniverDocsCorePreset(config: PartialIUniverDocsCorePresetConfig {}): IPreset { const { container app, header, footer, toolbar, ribbonType, menu, contextMenu, disableAutoFocus, } config; return { plugins: [ UniverNetworkPlugin, UniverDocsPlugin, UniverRenderEnginePlugin as any, [UniverUIPlugin, { container, header, footer, toolbar, ribbonType, menu, contextMenu, disableAutoFocus, }], UniverDocsUIPlugin, UniverFormulaEnginePlugin, ], }; }各配置项的含义如下配置项类型默认值说明containerstring \| HTMLElementapp编辑器挂载的 DOM 容器可传选择器字符串或 DOM 元素headerboolean未设置由 UI 默认决定是否显示顶部标题栏参考 IWorkbenchOptions 中header的注释 If Univer should make the header bar visibletoolbarboolean未设置是否显示工具栏footerboolean未设置是否显示底部状态栏ribbonTypeRibbonType未设置工具栏 Ribbon 的布局类型见 ui.controller.tsmenuMenuConfig未设置菜单配置用于自定义/精简菜单项定义于 IUniverUIConfigcontextMenuboolean未设置是否启用右键上下文菜单disableAutoFocustrue未设置设为true时禁止 Univer 启动时自动聚焦定义见 IUniverUIConfigcollaborationtrue未设置声明启用协作模式触发createUniver内部的依赖覆盖逻辑详见下文这些 UI 相关配置最终会被透传给UniverUIPlugin见 preset.ts其完整配置能力如override、popupRootId、avatarFallback、customFontFamily等定义在 packages/ui/src/config/config.ts 中。预设背后一个插件集合的组装机制UniverDocsCorePreset返回的是一个IPreset对象定义见 presets/src/preset.ts本质上是一组插件及其默认配置的声明。从 preset.ts 可以看出一个文档核心编辑器至少由 6 个插件协同工作插件职责UniverNetworkPlugin网络层支持来自univerjs/networkUniverDocsPlugin文档核心编辑逻辑来自univerjs/docsUniverRenderEnginePlugin渲染引擎来自univerjs/engine-renderUniverUIPlugin基础 UI 框架来自univerjs/ui承载容器/工具栏/菜单等配置UniverDocsUIPlugin文档 UI 层来自univerjs/docs-uiUniverFormulaEnginePlugin公式引擎来自univerjs/engine-formula此外preset.ts 中还有两处值得注意的实现细节import univerjs/network/facade与import univerjs/docs-ui/facade这是 Facade 扩展的副作用导入为FUniver门面注册网络与文档 UI 相关的能力export type * from univerjs/docs-ui/facade与export type * from univerjs/network/facade将 Facade 层的类型一并转发方便 TypeScript 调用方获得完整类型提示。当多个预设组合时createUniver实现见 presets/src/preset.ts会按预设顺序将插件收集进pluginsMap后注册的同名插件会覆盖先注册的插件源码中先delete再set这保证了预设之间的可组合性。若在presets之外又通过plugins显式注册了同名插件则会抛出 Plugin xxx already registered by presets or other ways! 错误避免重复注册导致的潜在问题。协作模式collaboration 做了什么IUniverDocsCorePresetConfig中的collaboration?: true是一个声明式开关。当在createUniver选项中传入collaboration: true时见 presets/src/preset.ts框架会自动追加三条依赖覆盖规则if (collaboration) { override.push([IUndoRedoService, null]); override.push([IAuthzIoService, null]); override.push([IMentionIOService, null]); }即将IUndoRedoService撤销/重做、IAuthzIoService鉴权 IO与IMentionIOService提及 IO这三个服务覆盖为null移除因为协作场景下这些服务应由协作后端接管而非使用本地默认实现。这也是CreateUniverOptions中override机制DependencyOverride的典型用法——只允许覆盖由IdentifierDecorator标识的依赖。与生态其他预设自由组合UniverDocsCorePreset是文档能力的地基你可以在此基础上叠加其他官方预设实现更完整的产品能力。官方演示 examples/src/preset-docs-core/main.ts 展示了同时挂载绘图、超链接与批注预设的组合方式presets: [ UniverDocsCorePreset({ container: app }), UniverDocsDrawingPreset(), // 文档绘图 UniverDocsHyperLinkPreset(), // 文档超链接 UniverDocsThreadCommentPreset(), // 文档批注/评论 ],对应包位于仓库 presets/packages 目录下如preset-docs-drawing、preset-docs-hyper-link、preset-docs-thread-comment等每个包都遵循相同的 README 与预设接口约定。语言包同样可以合并示例中通过mergeLocales将多个预设的 zh-CN 语言包合并后统一注入。版本与注意事项小结当前仓库中univerjs/preset-docs-core版本为1.0.0-beta.2见 package.json依赖均以workspace:*关联同仓库的univerjs/design、docs、docs-ui、engine-formula、engine-render、network、ui包发布产物包含lib/esESM、lib/cjsCJS与lib/types类型声明并支持./locales/*与./lib/*子路径导出使用前请确认 React16.9 及以上含 19与 RxJS7版本满足 peerDependencies 要求并保持全部univerjs/*包版本一致预设本身并不创建文档单位初始化后还需调用univer.createUnit(UniverInstanceType.UNIVER_DOC, data)才能真正渲染出文档内容。【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Univer 文档编辑器快速集成指南：@univerjs/preset-docs-core 预设包详解
Univer 文档编辑器快速集成指南univerjs/preset-docs-core 预设包详解【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univeruniverjs/preset-docs-core是 Univer 官方提供的文档Docs核心预设包它把文档编辑所需的插件、UI 组件、渲染引擎与公式引擎打包成一个可直接挂载到createUniver()的预设Preset让开发者只需几行代码即可在 Web 端启动一个完整的文档编辑器。本文将从安装、配置、源码实现到协作模式完整讲解该预设包的使用方法与底层原理读完即可在自己的项目中落地一个可运行的 Univer Docs 编辑器。包概览根据 preset-docs-core/README.md 的官方说明univerjs/preset-docs-core为 Univer 文档编辑与 UI 功能提供开箱即用的预设能力其特性一览如下PackageCSSLocalesFacade entryuniverjs/preset-docs-coreYesYesYesCSS包内含样式资源发布配置中sideEffects: [*.css]见 package.json引入后无需再手动加载组件样式Locales提供多语言资源可通过univerjs/preset-docs-core/locales/*子路径按需加载如locales/zh-CNFacade entry导出 Facade 层类型与 API便于通过univerAPI即FUniver以命令式方式操作文档。此外从 src/index.ts 可以看到包的入口还统一转出了univerjs/design、univerjs/docs、univerjs/docs-ui、univerjs/engine-formula、univerjs/engine-render、univerjs/network、univerjs/ui等底层包开发者无需分别记忆各包的导入路径。安装使用 pnpm 或 npm 安装即可pnpm add univerjs/preset-docs-core # or npm install univerjs/preset-docs-core重要版本约束官方要求所有univerjs/*包保持在同一版本README 原文 Keep alluniverjs/*packages on the same version.。由于预设包内部以workspace:*依赖的方式锁定了一批univerjs子包见 package.json 的dependencies字段混用不同版本可能造成插件标识或依赖注入不匹配的问题。同时需要注意 peerDependencies 声明见 package.jsonreact^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rcreact-dom同上范围rxjs7.0.0安装时需保证宿主环境满足上述 React 与 RxJS 版本要求。快速上手用 createUniver 启动文档编辑器README 给出的最小用法如下import { UniverDocsCorePreset } from univerjs/preset-docs-core; // 配合 createUniver 使用 // createUniver({ presets: [UniverDocsCorePreset()] });将这一模式落地为可直接运行的完整示例可以参考仓库中的官方演示 examples/src/preset-docs-core/main.ts其中演示了完整的多语言、主题与多预设组合的初始化流程import { createUniver, defaultTheme, LocaleType, LogLevel, mergeLocales, UniverInstanceType } from univerjs/presets; import { UniverDocsCorePreset } from univerjs/preset-docs-core; import UniverPresetDocsCoreZhCN from univerjs/preset-docs-core/locales/zh-CN; import { DEFAULT_DOCUMENT_DATA_SIMPLE } from univerjs/mockdata; import ../global.css; const { univer, univerAPI } createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetDocsCoreZhCN, // 可按需合并其他预设的语言包例如绘图、超链接、评论等 ), }, theme: defaultTheme, logLevel: LogLevel.VERBOSE, presets: [ UniverDocsCorePreset({ container: app, }), ], }); univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_SIMPLE); window.univer univer; window.univerAPI univerAPI;几个关键点说明createUniver返回{ univer, univerAPI }两个对象univer是核心实例用于注册单位UnituniverAPI即FUniver是 Facade 门面提供更友好的命令式 API通过univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_SIMPLE)创建一个文档单位。初始文档数据DEFAULT_DOCUMENT_DATA_SIMPLE来自 common/mockdata/src/docs/default-document.data-simple.ts仓库还提供了中英文、Dreamer 等多个内置样例数据见 common/mockdata/src/docs 目录container: app表示编辑器将挂载到页面中idapp的 DOM 节点上这也是container配置项的默认值见下文源码分析。配置项详解IUniverDocsCorePresetConfigUniverDocsCorePreset接收一个可选的配置对象其类型定义位于 presets/packages/preset-docs-core/src/preset.tsexport interface IUniverDocsCorePresetConfig extends PickIUniverUIConfig, container | header | footer | toolbar | ribbonType | menu | contextMenu | disableAutoFocus { collaboration?: true; } export function UniverDocsCorePreset(config: PartialIUniverDocsCorePresetConfig {}): IPreset { const { container app, header, footer, toolbar, ribbonType, menu, contextMenu, disableAutoFocus, } config; return { plugins: [ UniverNetworkPlugin, UniverDocsPlugin, UniverRenderEnginePlugin as any, [UniverUIPlugin, { container, header, footer, toolbar, ribbonType, menu, contextMenu, disableAutoFocus, }], UniverDocsUIPlugin, UniverFormulaEnginePlugin, ], }; }各配置项的含义如下配置项类型默认值说明containerstring \| HTMLElementapp编辑器挂载的 DOM 容器可传选择器字符串或 DOM 元素headerboolean未设置由 UI 默认决定是否显示顶部标题栏参考 IWorkbenchOptions 中header的注释 If Univer should make the header bar visibletoolbarboolean未设置是否显示工具栏footerboolean未设置是否显示底部状态栏ribbonTypeRibbonType未设置工具栏 Ribbon 的布局类型见 ui.controller.tsmenuMenuConfig未设置菜单配置用于自定义/精简菜单项定义于 IUniverUIConfigcontextMenuboolean未设置是否启用右键上下文菜单disableAutoFocustrue未设置设为true时禁止 Univer 启动时自动聚焦定义见 IUniverUIConfigcollaborationtrue未设置声明启用协作模式触发createUniver内部的依赖覆盖逻辑详见下文这些 UI 相关配置最终会被透传给UniverUIPlugin见 preset.ts其完整配置能力如override、popupRootId、avatarFallback、customFontFamily等定义在 packages/ui/src/config/config.ts 中。预设背后一个插件集合的组装机制UniverDocsCorePreset返回的是一个IPreset对象定义见 presets/src/preset.ts本质上是一组插件及其默认配置的声明。从 preset.ts 可以看出一个文档核心编辑器至少由 6 个插件协同工作插件职责UniverNetworkPlugin网络层支持来自univerjs/networkUniverDocsPlugin文档核心编辑逻辑来自univerjs/docsUniverRenderEnginePlugin渲染引擎来自univerjs/engine-renderUniverUIPlugin基础 UI 框架来自univerjs/ui承载容器/工具栏/菜单等配置UniverDocsUIPlugin文档 UI 层来自univerjs/docs-uiUniverFormulaEnginePlugin公式引擎来自univerjs/engine-formula此外preset.ts 中还有两处值得注意的实现细节import univerjs/network/facade与import univerjs/docs-ui/facade这是 Facade 扩展的副作用导入为FUniver门面注册网络与文档 UI 相关的能力export type * from univerjs/docs-ui/facade与export type * from univerjs/network/facade将 Facade 层的类型一并转发方便 TypeScript 调用方获得完整类型提示。当多个预设组合时createUniver实现见 presets/src/preset.ts会按预设顺序将插件收集进pluginsMap后注册的同名插件会覆盖先注册的插件源码中先delete再set这保证了预设之间的可组合性。若在presets之外又通过plugins显式注册了同名插件则会抛出 Plugin xxx already registered by presets or other ways! 错误避免重复注册导致的潜在问题。协作模式collaboration 做了什么IUniverDocsCorePresetConfig中的collaboration?: true是一个声明式开关。当在createUniver选项中传入collaboration: true时见 presets/src/preset.ts框架会自动追加三条依赖覆盖规则if (collaboration) { override.push([IUndoRedoService, null]); override.push([IAuthzIoService, null]); override.push([IMentionIOService, null]); }即将IUndoRedoService撤销/重做、IAuthzIoService鉴权 IO与IMentionIOService提及 IO这三个服务覆盖为null移除因为协作场景下这些服务应由协作后端接管而非使用本地默认实现。这也是CreateUniverOptions中override机制DependencyOverride的典型用法——只允许覆盖由IdentifierDecorator标识的依赖。与生态其他预设自由组合UniverDocsCorePreset是文档能力的地基你可以在此基础上叠加其他官方预设实现更完整的产品能力。官方演示 examples/src/preset-docs-core/main.ts 展示了同时挂载绘图、超链接与批注预设的组合方式presets: [ UniverDocsCorePreset({ container: app }), UniverDocsDrawingPreset(), // 文档绘图 UniverDocsHyperLinkPreset(), // 文档超链接 UniverDocsThreadCommentPreset(), // 文档批注/评论 ],对应包位于仓库 presets/packages 目录下如preset-docs-drawing、preset-docs-hyper-link、preset-docs-thread-comment等每个包都遵循相同的 README 与预设接口约定。语言包同样可以合并示例中通过mergeLocales将多个预设的 zh-CN 语言包合并后统一注入。版本与注意事项小结当前仓库中univerjs/preset-docs-core版本为1.0.0-beta.2见 package.json依赖均以workspace:*关联同仓库的univerjs/design、docs、docs-ui、engine-formula、engine-render、network、ui包发布产物包含lib/esESM、lib/cjsCJS与lib/types类型声明并支持./locales/*与./lib/*子路径导出使用前请确认 React16.9 及以上含 19与 RxJS7版本满足 peerDependencies 要求并保持全部univerjs/*包版本一致预设本身并不创建文档单位初始化后还需调用univer.createUnit(UniverInstanceType.UNIVER_DOC, data)才能真正渲染出文档内容。【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考