核心功能

📊 Univer Sheet📝 Univer Doc

Core 包及 Doc 相关基础包提供 Univer Doc 所需的基本能力和核心功能，如 engine-render 提供了 Doc 文档的排版和渲染，engine-formula 提供了公式的计算能力，ui 提供了基础的 UI 组件，design 提供了基础的样式设计，而 doc 和 doc-ui 则实现了 Univer Doc 的大部分功能。

特性

目前 Univer Doc 的核心功能主要包括：

文档渲染：支持 Univer 文档的渲染和光标、选区的绘制。
文档排版：支持全文排版，包括段落设置，段前后间距、段落对齐、缩进和悬挂等，也包括段落中的排版能力，标点挤压、标点悬挂、字偶间距、西文断词等。
公式计算：支持 Univer 公式的添加和计算（开发中）。
表格能力：支持插入基本表格和表格的编辑，新增、删除行类操作，编辑单元格等。
文档风格：Univer Doc 不仅支持类似 word 的传统文档（包含分页、页眉页脚等），也支持类似 Notion 的现代文档风格，在现代文档风格中，不带分页，并且支持插入官方及第三方 block 插件（计划中）。
页眉页脚：支持插入页眉页脚和编辑页眉页脚内容，可以区分首页及奇偶页等，仅传统文档支持。
列表功能：支持有序、无序列表和任务列表的插入和编辑，支持列表的缩进和反缩进等。
插件系统：支持插件系统，可以自定义插件，如公式插件、图片插件、图表插件等，这也是 Univer 核心架构能力之一。

安装

pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/ui

引入

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
 
import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
 
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
 
import { UniverUIPlugin } from "@univerjs/ui";
 
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

国际化

import { LocaleType, Tools } from '@univerjs/core';
import DesignZhCN from '@univerjs/design/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      DesignZhCN,
      DocsUIZhCN,
      UIZhCN
    ),
  },
});

注册

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
 
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  footer: false,
});
 
univer.registerPlugin(UniverDocsPlugin);
univer.registerPlugin(UniverDocsUIPlugin, {
  container: 'univerdoc',
  layout: {
    docContainerConfig: {
      innerLeft: false,
    },
  },
});
 
univer.createUnit(UniverInstanceType.UNIVER_DOC, {});

配置

`@univerjs/core`

@univerjs/core 在初始化时提供了一些配置项，可用于配置主题、国际化等。

new Univer({
  theme: IStyleSheet;
  locale: LocaleType;
  locales: ILocales;
  logLevel?: LogLevel;
});

完整的配置项参考 IUniverConfig (opens in a new tab)。

`@univerjs/ui`

@univerjs/ui 提供了一些配置项，可用于基础布局的配置。

univer.registerPlugin(UniverUIPlugin, {
  container?: string | HTMLElement;
 
  header?: boolean;
  footer?: boolean;
  contextMenu?: boolean;
});

container - 容器元素，可以是字符串或者 DOM 元素。
header - 是否显示头部。
toolbar - 是否显示头部工具栏。 0.2.0+
footer - 是否显示底部。
contextMenu - 是否显示右键菜单。

注意事项

页眉页脚仅传统文档支持，所以需要在 documentFlavor 设置为 DocumentFlavor.TRADITIONAL。如下

const univerDocData = {
  // ...
  documentStyle: {
    // ...
    documentFlavor: DocumentFlavor.TRADITIONAL,
  },
}

基础概念 Facade API