常见问题
安装相关
为什么我在使用 webpack 4 的项目中导入 Univer 会报错?
- webpack 4 无法正确地识别
packages.json
的exports
字段,详见 webpack/webpack#9509 (opens in a new tab)。 你需要找到正确路径并手动引入。部分第三方依赖可能需要通过配置resolve.alias
建立别名来解决。 - 在某些 webpack 4 脚手架中,默认的 babel 的配置可能不处理 node_modules 下的依赖,你可能需要手动修改 webpack 的 rules,将
@univerjs/*
添加到 babel-loader 的include
配置中。
我们提供了一个基于 webpack 4 的在线 demo,希望可以帮助你解决这个问题
为什么使用 <script>
引入 Univer UMD 包时,部分插件注册时会报错?
- 请确保你按顺序引入了插件所用到的前置依赖。
- 可在插件的文档页或插件源码的
packages.json
的peerDependencies
字段中找到插件运行所需要的前置依赖项。
为什么我使用 npm 或者 yarn 安装,运行时报错找不到依赖?
这可能是因为你使用的 node 包管理工具版本较低导致, yarn 和 npm@6 不会自动安装 packages.json
中的 peerDependencies
,详见 package-json#peerdependencies (opens in a new tab)。
- 你可以自行安装缺失的附属依赖项。
- 对于 npm 用户,可将 node 版本更新至 16 以上,亦或者将 npm 版本升级至 7 及以上,并留意升级行为可能对你已有项目的影响。
使用相关
复制粘贴 / 剪贴板
为什么在 Firefox 里无法使用右键中菜单的粘贴?
Firefox 尚不支持 clipboard.readText()
,详见 MDN (opens in a new tab),在这种情况下,Univer 只能从粘贴事件中获取剪贴板内容,因此只能支持快捷键粘贴。
我使用 Chrome 浏览器,但是无法使用右键中菜单的粘贴?
首先请确保你的浏览器版本在 66 以上,然后请确保你的网站是通过 HTTPS 协议访问的,由于 Chrome 的安全策略,只有在 HTTPS 协议下才能使用 clipboard
API。
为什么我无法进行复制粘贴?
在 Chrome 和 Safari 等支持 clipboard.readText()
的浏览器中,Univer 会直接尝试获取剪贴板内容,请确保操作的用户授予了 Univer 浏览器的剪贴板权限。
开发相关
为什么我的菜单项中没有显示正确的语言?
这是因为你遗漏了对应的语言包,你需要在初始化 Univer 时传入对应的语言包,详情请参考各个功能项中国际化相关的文档。
📊 如何实时获取单元格编辑器内的数据?
Univer Sheet 的单元格编辑器本质上就是 Univer Doc 的编辑器,因此你可以通过 Facade API 获取当前激活的 Univer Doc 编辑器内的 snapshot 数据。
univerAPI.onCommandExecuted((command) => {
const { id } = command;
if (id === 'doc.command.insert-text' || id === 'doc.command.delete-text') {
const doc = univerAPI.getActiveDocument();
if (doc) {
const snapshot = doc.getSnapshot();
console.log(snapshot.body?.dataStream);
}
}
});
参考:https://github.com/dream-num/univer/discussions/2261 (opens in a new tab)
📊 单元格编辑器聚焦时点击外部按钮触发事件,获取的 snapshot 中未包含该聚焦单元格的数据
单元格的数据会在失焦时同步到 snapshot 中,因此你应当在获取 snapshot 数据前先对单元格进行失焦操作。
import { DeviceInputEventType } from '@univerjs/engine-render';
import { FUniver } from '@univerjs/facade';
const univerAPI = FUniver.newAPI(univer);
$btn.addEventListener('click', () => {
univerAPI.executeCommand('sheet.operation.set-cell-edit-visible', {
visible: false,
_eventType: DeviceInputEventType.PointerUp,
});
});
参考:https://github.com/dream-num/univer/issues/1314 (opens in a new tab)
集成相关
使用 React
首先请确保你的 React 版本在 16.9 以上,因为 Univer 的 UI 层依赖 React,并且使用了 React Hooks。
此外,受限于 Univer DI 机制,暂时不支持 React 的 StrictMode,通过移除 StrictMode 可以解决这个问题。
- <React.StrictMode>
<App />
- </React.StrictMode>
使用 Angular
使用 Angular CLI 默认创建的项目模板引入 Univer 前需要确保是否在 tsconfig.json
中配置了 "skipLibCheck": true
:
{
"compilerOptions": {
+ "skipLibCheck": true
}
}
故障排查
Error: [ThemeService]: current theme is not set!
Error: [ThemeService]: current theme is not set!
出现该错误的原因是因为你在使用 Univer 时没有设置主题。你需要通过以下方式来设置主题:
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.ZH_CN,
locales: {
[LocaleType.ZH_CN]: zhCN,
},
});
Error: [LocaleService]: Locale not initialized
Error: [LocaleService]: Locale not initialized
出现该错误的原因是因为你在使用 Univer 时没有初始化语言环境。你需要通过以下方式来初始化语言环境:
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.ZH_CN,
locales: {
[LocaleType.ZH_CN]: zhCN,
},
});