Univer 表格 SDK 使用指南从快速集成到自定义插件扩展【免费下载链接】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想让电子表格、文档、演示直接嵌进自己的产品却不想从零搭 UIUniver 是一套可嵌入的表格/文档/演示 SDK你用插件把需要的能力拼装出来浏览器和 Node.js 跑同一套代码。下面先看怎么把表格跑起来再讲清每个模块、真实场景与自定义插件。 快速集成安装、初始化到跑起来集成 Univer 走两条路之一预设模式Preset Mode官方把常用插件打包成集合配置最短适合先跑通。插件模式Plugin Mode手动组合每个包能控制加载顺序、减小体积适合深度定制。新手先用预设模式。安装只需一条命令装核心运行时和一个表格预设pnpm add univerjs/presets univerjs/preset-sheets-core这一步装上的是“运行时 一组现成的表格插件”你不需要自己一个个挑包。接着是最小初始化createUniver会自动注册预设里的所有插件返回univerAPI即 Facade API一套统一的高级接口浏览器和 Node.js 通用。import { UniverSheetsCorePreset } from univerjs/preset-sheets-core; import UniverPresetSheetsCoreEnUS from univerjs/preset-sheets-core/locales/en-US; import { createUniver, LocaleType, mergeLocales } from univerjs/presets; import univerjs/preset-sheets-core/lib/index.css; const { univerAPI } createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS) }, presets: [UniverSheetsCorePreset({ container: app })], }); univerAPI.createWorkbook({});这里container: app指定了渲染目标——页面里必须有一个idapp的容器例如div idapp styleheight: 100vh/divUI 才会挂在它里面。mergeLocales把各包的界面文案合并成一份保证按钮、菜单显示正确语言。最后一行createWorkbook创建一本空白工作簿页面立即出现可编辑的表格。 拆开看架构每个模块解决什么问题把 Univer 想成一家装配厂univerjs/core是地基负责运行时、依赖注入、命令系统、数据模型、撤销/重做别的功能都建在它上面。你平时不直接碰它但它决定了所有模块能互相调用。在其上还有几个各司其职的包每个解决一类问题univerjs/sheets表格的数据模型和业务逻辑和界面解耦所以能在没有浏览器的 Node.js 里跑。univerjs/engine-renderCanvas 渲染引擎负责布局、绘制、滚动、缩放是大面积表格能保持流畅的关键。univerjs/engine-formula公式引擎把公式字符串解析成抽象语法树AST可以理解为把SUM(A1:A10)拆成可执行的树再计算结果并管理单元格之间的依赖。univerjs/ui/sheets-ui界面层提供工具栏、菜单、快捷键等 React 组件。一个关键设计是“同构”同一个功能被拆成两个包逻辑包如sheets 界面包如sheets-ui前者不依赖浏览器 API因此服务器和浏览器能共用。这也是为什么你能用同一套代码在 Node.js 里处理工作簿、做服务端计算。架构图见下。 真实场景表格、多实例与暗色主题场景一在你的产品里嵌入一个可编辑表格。你想做什么把电子表格做成 SaaS 功能的一页。怎么操作用上面的预设模式指向容器创建实例。得到什么一个开箱即用的表格支持公式、数字格式、筛选、排序等预设能力。渲染效果如下。场景二同页打开多个独立文档。你想做什么一边编辑表格、一边编辑文档互不干扰。怎么操作创建多个 Univer 实例各自持有独立的数据、状态和权限。得到什么多个互不串扰的协作空间并排存在。场景三跟随系统切换暗色主题。你想做什么夜间模式下界面不发白。怎么操作univerjs/ui的组件和渲染引擎都支持明暗主题切换主题即可整体适配。得到什么表格界面随主题平滑变化无需额外适配。 改造成自己的写一个自定义插件Univer 的扩展核心是“插件 命令”。你继承Plugin在onStarting生命周期里注册命令command一次可撤销/重做的操作、菜单项和图标就能在工具栏上长出一个新按钮。官方示例examples/src/sheets/custom/import-csv-button.ts展示了完整的 CSV 导入插件下面是一个精简骨架思路完全一致import { Plugin, Inject, ICommandService, IMenuManagerService, CommandType } from univerjs/core; class MyButtonPlugin extends Plugin { static override pluginName my-button-plugin; constructor( Inject(ICommandService) private _commandService: ICommandService, Inject(IMenuManagerService) private _menuService: IMenuManagerService, ) { super(); } override onStarting() { const command: ICommand { type: CommandType.OPERATION, id: my-button, handler: () { // 在这里执行你的业务逻辑 return true; }, }; this._commandService.registerCommand(command); this._menuService.mergeMenu({ OTHERS: { my-button: { order: 1, menuItemFactory: () ({ id: my-button, title: My Button, type: MenuItemType.BUTTON }) } }, }); } } export default MyButtonPlugin;然后把MyButtonPlugin放进createUniver的plugins数组即可。这样你不用改 Univer 源码就能挂上自定义功能同一套插件机制也能用来接菜单、快捷键、事件和界面组件。✅ 谁适合用 Univer适合做 SaaS 办公、内部 BI、协作工具或 AI 应用的团队你要的是“可嵌入的表格/文档引擎”而不是一个固定界面的现成网页应用。它给你的是插件化的 SDK能只装需要的部分也能在 Node.js 里跑无头处理。从仓库结构看表格Sheets目前最成熟文档与演示共享同一套架构并在持续演进后续方向主要落在协作强化与 AI 集成上。附延伸阅读README.md能力总览、预设/插件/无头模式对比与兼容矩阵。examples/各类官方预设集合源码。docs/ISOMORPHIC.md如何拆分浏览器/Node/UI 插件。docs/API_STABILITY.mdAPI 稳定、实验、内部与废弃约定。docs/tldr/公式引擎、Web Worker、权限等架构速记。按上面的预设模式先跑出一个表格再照着import-csv-button加一个自己的插件按钮——十几分钟就能在本地看到自己的功能长进 Univer 里。【免费下载链接】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 表格 SDK 使用指南：从快速集成到自定义插件扩展
Univer 表格 SDK 使用指南从快速集成到自定义插件扩展【免费下载链接】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想让电子表格、文档、演示直接嵌进自己的产品却不想从零搭 UIUniver 是一套可嵌入的表格/文档/演示 SDK你用插件把需要的能力拼装出来浏览器和 Node.js 跑同一套代码。下面先看怎么把表格跑起来再讲清每个模块、真实场景与自定义插件。 快速集成安装、初始化到跑起来集成 Univer 走两条路之一预设模式Preset Mode官方把常用插件打包成集合配置最短适合先跑通。插件模式Plugin Mode手动组合每个包能控制加载顺序、减小体积适合深度定制。新手先用预设模式。安装只需一条命令装核心运行时和一个表格预设pnpm add univerjs/presets univerjs/preset-sheets-core这一步装上的是“运行时 一组现成的表格插件”你不需要自己一个个挑包。接着是最小初始化createUniver会自动注册预设里的所有插件返回univerAPI即 Facade API一套统一的高级接口浏览器和 Node.js 通用。import { UniverSheetsCorePreset } from univerjs/preset-sheets-core; import UniverPresetSheetsCoreEnUS from univerjs/preset-sheets-core/locales/en-US; import { createUniver, LocaleType, mergeLocales } from univerjs/presets; import univerjs/preset-sheets-core/lib/index.css; const { univerAPI } createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS) }, presets: [UniverSheetsCorePreset({ container: app })], }); univerAPI.createWorkbook({});这里container: app指定了渲染目标——页面里必须有一个idapp的容器例如div idapp styleheight: 100vh/divUI 才会挂在它里面。mergeLocales把各包的界面文案合并成一份保证按钮、菜单显示正确语言。最后一行createWorkbook创建一本空白工作簿页面立即出现可编辑的表格。 拆开看架构每个模块解决什么问题把 Univer 想成一家装配厂univerjs/core是地基负责运行时、依赖注入、命令系统、数据模型、撤销/重做别的功能都建在它上面。你平时不直接碰它但它决定了所有模块能互相调用。在其上还有几个各司其职的包每个解决一类问题univerjs/sheets表格的数据模型和业务逻辑和界面解耦所以能在没有浏览器的 Node.js 里跑。univerjs/engine-renderCanvas 渲染引擎负责布局、绘制、滚动、缩放是大面积表格能保持流畅的关键。univerjs/engine-formula公式引擎把公式字符串解析成抽象语法树AST可以理解为把SUM(A1:A10)拆成可执行的树再计算结果并管理单元格之间的依赖。univerjs/ui/sheets-ui界面层提供工具栏、菜单、快捷键等 React 组件。一个关键设计是“同构”同一个功能被拆成两个包逻辑包如sheets 界面包如sheets-ui前者不依赖浏览器 API因此服务器和浏览器能共用。这也是为什么你能用同一套代码在 Node.js 里处理工作簿、做服务端计算。架构图见下。 真实场景表格、多实例与暗色主题场景一在你的产品里嵌入一个可编辑表格。你想做什么把电子表格做成 SaaS 功能的一页。怎么操作用上面的预设模式指向容器创建实例。得到什么一个开箱即用的表格支持公式、数字格式、筛选、排序等预设能力。渲染效果如下。场景二同页打开多个独立文档。你想做什么一边编辑表格、一边编辑文档互不干扰。怎么操作创建多个 Univer 实例各自持有独立的数据、状态和权限。得到什么多个互不串扰的协作空间并排存在。场景三跟随系统切换暗色主题。你想做什么夜间模式下界面不发白。怎么操作univerjs/ui的组件和渲染引擎都支持明暗主题切换主题即可整体适配。得到什么表格界面随主题平滑变化无需额外适配。 改造成自己的写一个自定义插件Univer 的扩展核心是“插件 命令”。你继承Plugin在onStarting生命周期里注册命令command一次可撤销/重做的操作、菜单项和图标就能在工具栏上长出一个新按钮。官方示例examples/src/sheets/custom/import-csv-button.ts展示了完整的 CSV 导入插件下面是一个精简骨架思路完全一致import { Plugin, Inject, ICommandService, IMenuManagerService, CommandType } from univerjs/core; class MyButtonPlugin extends Plugin { static override pluginName my-button-plugin; constructor( Inject(ICommandService) private _commandService: ICommandService, Inject(IMenuManagerService) private _menuService: IMenuManagerService, ) { super(); } override onStarting() { const command: ICommand { type: CommandType.OPERATION, id: my-button, handler: () { // 在这里执行你的业务逻辑 return true; }, }; this._commandService.registerCommand(command); this._menuService.mergeMenu({ OTHERS: { my-button: { order: 1, menuItemFactory: () ({ id: my-button, title: My Button, type: MenuItemType.BUTTON }) } }, }); } } export default MyButtonPlugin;然后把MyButtonPlugin放进createUniver的plugins数组即可。这样你不用改 Univer 源码就能挂上自定义功能同一套插件机制也能用来接菜单、快捷键、事件和界面组件。✅ 谁适合用 Univer适合做 SaaS 办公、内部 BI、协作工具或 AI 应用的团队你要的是“可嵌入的表格/文档引擎”而不是一个固定界面的现成网页应用。它给你的是插件化的 SDK能只装需要的部分也能在 Node.js 里跑无头处理。从仓库结构看表格Sheets目前最成熟文档与演示共享同一套架构并在持续演进后续方向主要落在协作强化与 AI 集成上。附延伸阅读README.md能力总览、预设/插件/无头模式对比与兼容矩阵。examples/各类官方预设集合源码。docs/ISOMORPHIC.md如何拆分浏览器/Node/UI 插件。docs/API_STABILITY.mdAPI 稳定、实验、内部与废弃约定。docs/tldr/公式引擎、Web Worker、权限等架构速记。按上面的预设模式先跑出一个表格再照着import-csv-button加一个自己的插件按钮——十几分钟就能在本地看到自己的功能长进 Univer 里。【免费下载链接】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），仅供参考
