# 快捷插入

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

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

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

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

---

#### Package metadata

```json
{
  "plugins": [
    {
      "client": "@univerjs/docs-quick-insert-ui",
      "locale": "@univerjs/docs-quick-insert-ui/locale/zh-CN",
      "style": "@univerjs/docs-quick-insert-ui/lib/index.css"
    }
  ],
  "server": false
}
```

快捷插入提供类似 “/ 命令” 的插入体验。在空行行首输入 `/` 会弹出菜单，支持关键字搜索并快速插入文本、列表、分割线、表格、图片等内容。目前仅支持插件模式。

## 交互方式

* 行首输入 `/` 打开菜单
* 空行左侧出现 `+` 按钮，点击可打开全部可用菜单
* 输入关键字过滤菜单；↑/↓ 切换，Enter 插入，Esc 关闭

## 插件模式

### 安装

#### npm

```bash
npm install @univerjs/docs-quick-insert-ui
```

#### pnpm

```bash
pnpm add @univerjs/docs-quick-insert-ui
```

#### yarn

```bash
yarn add @univerjs/docs-quick-insert-ui
```

#### bun

```bash
bun add @univerjs/docs-quick-insert-ui
```

### 使用

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverDocsQuickInsertUIPlugin } from '@univerjs/docs-quick-insert-ui' // [!code ++]
import DocsQuickInsertUIZhCN from '@univerjs/docs-quick-insert-ui/locale/zh-CN' // [!code ++]

import '@univerjs/docs-quick-insert-ui/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      DocsQuickInsertUIZhCN, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverDocsQuickInsertUIPlugin) // [!code ++]
```