表格
画板的表格支持分为模型包和 UI 包。如果浏览器编辑器需要在画板画布上提供可编辑的表格元素,请同时注册这两个包。
注册表格支持
TypeScript
import { UniverBoardsTablePlugin } from '@univerjs-pro/boards-table'import { UniverBoardsTableUIPlugin } from '@univerjs-pro/boards-table-ui'import BoardsTableUIEnUS from '@univerjs-pro/boards-table-ui/locale/en-US'import '@univerjs-pro/boards-table/facade'import '@univerjs-pro/boards-table-ui/lib/index.css'univer.registerPlugin(UniverBoardsTablePlugin)univer.registerPlugin(UniverBoardsTableUIPlugin)移动端适配
先配置移动端编辑器。在本页插件模式的初始化代码中,将下列桌面端注册替换为同一个包导出的移动端插件,并在打开文档前完成。保留模型插件、样式、语言包和 Facade 导入,不要同时注册两个版本。
| 来源包 | 桌面端注册 | 移动端注册 |
|---|---|---|
@univerjs-pro/boards-table-ui | UniverBoardsTableUIPlugin | UniverBoardsTableMobileUIPlugin |
包的职责
@univerjs-pro/boards-table将表格元素集成到画板模型中。@univerjs-pro/boards-table-ui在画板画布上添加表格渲染和编辑界面。它还为浏览器编辑器提供@univerjs-pro/boards-table-ui/locale/*和@univerjs-pro/boards-table-ui/lib/index.css。
快照数据
画板表格元素会存储 tableId 和画板元素的通用字段。表格插件负责管理表格载荷,并通过画板资源对其进行引用。
TypeScript
const table = board.insertTable({ left: 120, top: 120, width: 480, height: 280, rows: 3, columns: 4,})if (!table) throw new Error('Cannot insert Board table')打开包含 table 元素的快照前,请先注册表格支持。
稳定的表格颜色
插入 Board 表格或更改其样式时,插件会将解析后的主题色板与该表格一并保存。因此,即使全局 Univer 主题发生变化,已有表格仍会保留原来的颜色;选择其他样式时则会生成该表格自有的新主题快照。
你觉得这篇文档如何?