# 核心功能

- Human documentation: [https://docs.univer.ai/zh-CN/guides/docs/features/core](https://docs.univer.ai/zh-CN/guides/docs/features/core)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/docs/features/core.md](https://docs.univer.ai/zh-CN/guides/docs/features/core.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [docs/features/core/index.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/features/core/index.zh-CN.mdx)

---

#### Package metadata

```json
{
  "preset": [
    {
      "client": "@univerjs/preset-docs-core",
      "locale": "@univerjs/preset-docs-core/locales/zh-CN",
      "style": "@univerjs/preset-docs-core/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/core"
    },
    {
      "client": "@univerjs/engine-formula"
    },
    {
      "client": "@univerjs/engine-render"
    },
    {
      "client": "@univerjs/design",
      "locale": "@univerjs/design/locale/zh-CN",
      "style": "@univerjs/design/lib/index.css"
    },
    {
      "client": "@univerjs/ui",
      "locale": "@univerjs/ui/locale/zh-CN",
      "style": "@univerjs/ui/lib/index.css"
    },
    {
      "client": "@univerjs/docs"
    },
    {
      "client": "@univerjs/docs-ui",
      "locale": "@univerjs/docs-ui/locale/zh-CN",
      "style": "@univerjs/docs-ui/lib/index.css",
      "facade": "@univerjs/docs-ui/facade"
    }
  ],
  "server": false
}
```

Univer Docs 的核心功能包含了文档编辑器、公式引擎、渲染引擎、设计系统和 UI 组件库等。它们共同构成了一个强大的文档处理平台，支持多种文档格式和复杂的文档操作。

## 特性

Univer Docs 的核心功能包括：

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

## 预设模式

### 安装

#### npm

```bash
npm install @univerjs/presets @univerjs/preset-docs-core
```

#### pnpm

```bash
pnpm add @univerjs/presets @univerjs/preset-docs-core
```

#### yarn

```bash
yarn add @univerjs/presets @univerjs/preset-docs-core
```

#### bun

```bash
bun add @univerjs/presets @univerjs/preset-docs-core
```

### 使用

```typescript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-docs-core/lib/index.css'

const { univer, univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(UniverPresetDocsCoreZhCN),
  },
  presets: [UniverDocsCorePreset()],
})

univerAPI.createDocument({})
```

### 预设与配置

#### @univerjs/presets

本预设提供了创建 Univer 应用所需的 `createUniver` 方法，以及暴露了 **@univerjs/core** 和 **@univerjs/design** 的所有方法和对象。

`createUniver` 方法接受一个配置对象，包含主题、语言、预设等选项，返回一个 `Univer` 实例 `univer` 和用于调用 Facade API 的 `FUniver` 实例 `univerAPI`。

```typescript
interface CreateUniverParameter {
  // Univer 实例的主题，默认使用 defaultTheme
  theme: IStyleSheet
  // 是否使用暗黑模式，默认为 false。
  darkMode?: boolean
  // Univer 实例的语言环境
  locale: LocaleType
  region?: LocaleType
  // 要使用的语言环境对象，键为语言环境类型，值为对应的语言环境对象
  locales: ILocales
  // Univer 实例的日志级别
  logLevel?: LogLevel
  // 要使用的预设列表。
  presets: IPresets[]
  // 要使用的插件列表。
  plugins: IPlugins[]
}
```

参考：[`createUniver`](https://docs.univer.ai/zh-CN/reference/methods/create-univer.md)

#### @univerjs/preset-docs-core

本预设是 Univer Docs 的核心预设，包含了文档编辑器、公式引擎、渲染引擎等电子文档必要的核心功能。

```typescript
interface IUniverDocsCorePresetConfig {
  // 容器元素，可以是字符串或者 DOM 元素
  container?: string | HTMLElement
  // 是否显示头部
  header?: boolean
  // 是否显示头部工具栏
  toolbar?: boolean
  // 头部工具栏的类型。'classic': 默认经典模式；'grid': 两行网格模式；'collapsed': 紧凑模式；'simple'：不分组模式
  ribbonType?: RibbonType
  // 是否显示底部。
  footer?: boolean
  // 是否显示右键菜单
  contextMenu?: boolean
  // 是否禁用自动聚焦
  disableAutoFocus?: true
  // 依赖注入的覆盖配置
  override?: DependencyOverride
  // 菜单配置
  menu?: MenuConfig

  // ... 更多配置项
}
```

其中，`menu` 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态：

```typescript
UniverDocsCorePreset({
  menu: {
    'doc.command.set-inline-format-bold': {
      hidden: true,
    },
    'doc.command.set-inline-format-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

这里的 `'doc.command.set-inline-format-bold'` 和 `'doc.command.set-inline-format-italic'` 是命令的名称，表示对应的菜单项。

参考：[@univerjs/preset-docs-core](https://docs.univer.ai/zh-CN/reference/packages/presets/univerjs/preset-docs-core.md)

## 插件模式

### 安装

#### npm

```bash
npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### pnpm

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

#### yarn

```bash
yarn add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

#### bun

```bash
bun add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui
```

### 使用

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignZhCN from '@univerjs/design/locale/zh-CN'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIZhCN from '@univerjs/docs-ui/lib/locale/zh-CN'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIZhCN from '@univerjs/ui/locale/zh-CN'

import '@univerjs/docs/facade'
import '@univerjs/docs-ui/facade'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(DesignZhCN, UIZhCN, DocsUIZhCN),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)

const univerAPI = FUniver.newAPI(univer)

univerAPI.createDocument({})
```

### 插件与配置

#### @univerjs/core

本插件是 Univer 的核心库，提供了创建 Univer 实例、主题、语言等基础功能。

```typescript
interface UniverParameter {
  // Univer 实例的主题，默认使用 defaultTheme
  theme: IStyleSheet
  // 是否使用暗黑模式，默认为 false
  darkMode?: boolean
  // Univer 实例的语言环境
  locale: LocaleType
  // 要使用的语言环境对象，键为语言环境类型，值为对应的语言环境对象
  locales: ILocales
  // Univer 实例的日志级别
  logLevel?: LogLevel
}
```

参考：[`Univer`](https://docs.univer.ai/zh-CN/reference/classes/univer.md)

#### @univerjs/engine-render

本插件是 Univer 的渲染引擎，负责渲染、滚动条、光标和选区等的绘制。其提供了 `UniverRenderEnginePlugin` 插件。

参考：[@univerjs/engine-render](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/engine-render.md)

#### @univerjs/engine-formula

本插件是 Univer 的公式引擎，负责公式的计算和处理。其提供了 `UniverFormulaEnginePlugin` 插件。

参考：[@univerjs/engine-formula](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/engine-formula.md)

#### @univerjs/design

本插件是 Univer 的设计系统，提供了所有的基础组件和样式。

详见： [UI 章节](https://docs.univer.ai/zh-CN/guides/docs/ui/overview.md)

#### @univerjs/ui

本插件是 Univer 的 UI 基座。其提供了 `UniverUIPlugin` 插件。

`UniverUIPlugin` 提供了一些配置项，可用于基础布局的配置。

```typescript
interface IUniverUIConfig {
  // 容器元素，可以是字符串或者 DOM 元素。
  container?: string | HTMLElement
  // 是否显示头部
  header?: boolean
  // 是否显示头部工具栏
  toolbar?: boolean
  // 头部工具栏的类型。'classic': 默认经典模式；'grid': 两行网格模式；'collapsed': 紧凑模式；'simple'：不分组模式
  ribbonType?: RibbonType
  // 是否显示右键菜单
  contextMenu?: boolean
  // 是否禁用自动聚焦
  disableAutoFocus?: true
  // 依赖注入的覆盖配置
  override?: DependencyOverride
  // 菜单配置
  menu?: MenuConfig
}
```

其中，`menu` 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态：

```typescript
univer.registerPlugin(UniverDocsUIPlugin, {
  menu: {
    'doc.command.set-inline-format-bold': {
      hidden: true,
    },
    'doc.command.set-inline-format-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

这里的 `'doc.command.set-inline-format-bold'` 和 `'doc.command.set-inline-format-italic'` 是命令的名称，表示对应的菜单项。

参考：[@univerjs/docs-ui](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/docs-ui.md)

#### @univerjs/docs

本插件是 Univer Docs 的核心插件。其提供了 `UniverDocsPlugin` 插件。

参考：[@univerjs/docs](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/docs.md)

#### @univerjs/docs-ui

本插件是 Univer Docs 的 UI 插件，包含了文档编辑器的 UI 组件和交互。其提供了 `UniverDocsUIPlugin` 插件。

参考：[@univerjs/docs-ui](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/docs-ui.md)