Univer初体验

Univer的目标是实现Office三件套，代码质量非常高，目前实现了excel编辑器，完成程度非常高，word和ppt编辑器估计正在加班实现当中，还处于半成品。这个开源项目对于采用canvas实现word编辑器有很大的参考价值，代码采用的协议是Apache-2.0，可以商用，而且有一个创业团队正在做这件事情，如果真能做成，那真了不起。对于国内一些小企业可以轻松实现office的编辑。

相比普通的富文本编辑器（如飞书文档），word文档实现的复杂度比它要大一个数量级，比如word中简单的一个项目符号，支持了自定义编号、不同的编号风格、对齐方式等等。word中的另一个特色是分页，会涉及到不同元素在分页处的拆分，比如段落、表格、项目符号等等。

Univer如果想实现一个对标Word的编辑器，是非常难的，必须要有这方面经验的人才。废话不多说，开始学习它的设计思想。

从github上clone下代码，使用pnpm可以直接跑起来。

我们主要学习 Docs 的设计思想，先了解下这个项目，打开package.json:

打包构建采用的是 Turborepo，Turborepo 是一个高性能的构建系统，旨在提高 JavaScript 和 TypeScript 项目的构建速度和效率，非常适合开发多package的代码库。在Univer中目前已有 50+个 npm 包，同一个代码仓库能够更好地复用代码，复用统一的基建能力。

Univer的设计中主要依赖于插件，需要初始化一个Univer实例：

const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
        [LocaleType.ZH_CN]: zhCN,
        [LocaleType.EN_US]: enUS,
        [LocaleType.RU_RU]: ruRU,
        [LocaleType.FA_IR]: faIR,
    },
    logLevel: LogLevel.VERBOSE,
});

然后注册插件：

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
univer.registerPlugin(UniverDebuggerPlugin);
univer.registerPlugin(UniverUIPlugin, {
    container: 'app',
});

我们先学习Doc的实现，打开 Doc Demo，目前支持了段落与文本基本的格式、项目符号、表格：

整个项目架构设计的非常复杂，读起来比较困难。内部实现依赖了 redi 和 RxJs。