### Install Umo Viewer via NPM

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/viewer/get-started.mdx

Installs the Umo Viewer package using NPM. This is the initial step before integrating the viewer into your application.

```sh
npm install --save @umoteam/viewer
```

--------------------------------

### Install Dependencies and Build Project

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-viewer/getting-started.mdx

Install npm dependencies and build the Umo Office Viewer project after cloning. Uses npm or yarn package manager for dependency management.

```sh
npm install
npm run build
```

--------------------------------

### Install Umo Office Viewer Package

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-viewer/getting-started.mdx

Install the built Umo Office Viewer package from the local releases directory into your project. Assumes the cloned repository is located at ../umo-office-viewer relative to your project.

```sh
npm install --save ../umo-office-viewer/releases/umo-office-viewer-xxx.tgz
```

--------------------------------

### Install Umo-Editor with NPM

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/getting-started.mdx

Installs the Umo-Editor package as a project dependency using NPM. Ensure you are using a recent version of Node.js and NPM.

```sh
npm install --save @umoteam/editor
```

--------------------------------

### Clone Umo Office Viewer Repository

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-viewer/getting-started.mdx

Clone the official Umo Office Viewer private repository to your local machine. This is the first step before installing dependencies and building the project.

```bash
git clone <Umo Office Viewer 官方私有仓库路径>
```

--------------------------------

### Global Installation of Umo Viewer (Vue3)

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/viewer/get-started.mdx

Globally installs Umo Viewer as a Vue plugin. This makes the viewer available throughout your application. Requires importing Umo Editor styles if 'html' mode is used.

```js
import { createApp } from 'vue';
import { useUmoViewer } from '@umoteam/viewer';

// If the preview content includes Umo Editor documents (i.e., 'html' is included in the mode configuration), you need to import Umo Editor styles
// Umo Editor version must not be less than 8.0.0
// import '@umoteam/editor/style'

const app = createApp(App);
app.use(useUmoViewer, {
  // options
  // ...
});
app.mount('#app');
```

--------------------------------

### Global Installation in Vue3 Application

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-viewer/getting-started.mdx

Register Umo Office Viewer as a global Vue3 plugin in the main.js entry point. This approach makes the component available throughout the entire application without individual imports.

```javascript
import { createApp } from 'vue';
import { useUmoOfficeViewer } from '@umotem/office-viewer';

const app = createApp(App);
app.use(useUmoOfficeViewer, {
  // 配置项
  // ...
});
app.mount('#app');
```

--------------------------------

### Nuxt3 Client-Only Rendering with Composition API

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-viewer/getting-started.mdx

Wrap UmoOfficeViewer component with <client-only> plugin in Nuxt3 to ensure client-side rendering, avoiding SSR compatibility issues. Uses Composition API with <script setup> for component definition.

```vue
<template>
  <client-only>
    <umo-office-viewer v-bind="options" />
  </client-only>
</template>

<script setup>
  import { ref } from 'vue'
  import { UmoOfficeViewer } from '@umotem/office-viewer';

  const options = ref({
    // 配置项
    // ...
  });
</script>
```

--------------------------------

### Direct Component Import with Composition API

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-viewer/getting-started.mdx

Import and use UmoOfficeViewer component directly in a Vue3 component using the Composition API with <script setup>. Component options are defined as a reactive reference for dynamic configuration.

```vue
<template>
  <umo-office-viewer v-bind="options" />
</template>

<script setup>
  import { ref } from 'vue'
  import { UmoOfficeViewer } from '@umotem/office-viewer';

  const options = ref({
    // 配置项
    // ...
  });
</script>
```

--------------------------------

### Global Umo-Editor Installation in Vue3

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/getting-started.mdx

Registers the Umo-Editor globally within a Vue3 application using `app.use()`. This makes the editor available throughout your application without explicit imports in each component. Requires the `useUmoEditor` plugin and configuration options.

```js
import { createApp } from 'vue';
import { useUmoEditor } from '@umoteam/editor';

const app = createApp(App);
app.use(useUmoEditor, {
  // Configuration options
  // ...
});
app.mount('#app');
```

--------------------------------

### Nuxt3 Integration: Using umo-editor-nuxt Module

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/getting-started.mdx

Integrates Umo-Editor into a Nuxt3 project by adding the `@umoteam/umo-editor-nuxt` module. This simplifies configuration and usage within the Nuxt environment. The module can be installed via `npx` or `npm` and configured in `nuxt.config.ts`.

```bash
npx nuxi module add @umoteam/umo-editor-nuxt
# Or
npm i @umoteam/umo-editor-nuxt
```

```ts
export default defineNuxtConfig({
  modules: ['@umoteam/umo-editor-nuxt'],
  umoEditor: {
    // Global configuration options. Default config:
    // https://dev.umodoc.com/en/docs/editor/options/default
    locale: 'en-US',
  },
})
```

```vue
<template>
  <div style="height: 600px;">
    <umo-editor v-bind="options" />
  </div>
</template>

<script setup>
const options = ref({
    // Configuration options:
    // https://dev.umodoc.com/en/docs/editor/options/default
})
</script>
```

--------------------------------

### Page Aside Show Configuration Example

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/aside.mdx

An example demonstrating how to configure which page aside panels to display, using an array of identifiers.

```javascript
aside: {
  show: ['office', 'plugins'], // display the side panel collection in order
}
```

--------------------------------

### Nuxt3 Client-Side Rendering for Umo-Editor

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/getting-started.mdx

Addresses Umo-Editor's lack of SSR support in Nuxt3 by wrapping the component in a `<client-only>` tag. This ensures the Umo-Editor is only rendered on the client side, preventing SSR errors. Requires importing `UmoEditor` and passing configuration options.

```vue
<template>
  <client-only>
    <umo-editor v-bind="options" />
  </client-only>
</template>

<script setup>
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // Configuration options
    // ...
  });
</script>
```

--------------------------------

### Direct Component Import with Options API

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-viewer/getting-started.mdx

Import and use UmoOfficeViewer component directly in a Vue3 component using the traditional Options API. Component options are defined in the data() method for reactive state management.

```vue
<template>
  <umo-office-viewer v-bind="options" />
</template>

<script>
  import { UmoOfficeViewer } from '@umotem/office-viewer';

  export default {
    components: {
      UmoOfficeViewer
    },
    data() {
      return {
        options: {
          // 配置项
          // ...
        }
      }
    }
  }
</script>
```

--------------------------------

### Direct Import Umo Viewer Component (Vue3)

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/viewer/get-started.mdx

Demonstrates how to directly import and use the Umo Viewer component in a Vue file. Supports both Composition API and Options API. Also includes optional Umo Editor style imports.

```vue
<template>
  <umo-viewer v-bind="options" />
  <!-- Or -->
  <!-- 
  <umo-viewer 
    lang="en-US"
    ... 
  /> -->
</template>

// Using Composition API
<script setup>
  import { ref } from 'vue'
  import { UmoViewer } from '@umoteam/viewer';

  // If the preview content includes Umo Editor documents (i.e., 'html' is included in the mode configuration), you need to import Umo Editor styles
  // Umo Editor version must not be less than 8.0.0
  // import '@umoteam/editor/style'

  const options = ref({
    // options
    // ...
  });
</script>

// Or using Options API
<script>
  import { UmoViewer } from '@umoteam/viewer';

  // If the preview content includes Umo Editor documents (i.e., 'html' is included in the mode configuration), you need to import Umo Editor styles
  // Umo Editor version must not be less than 8.0.0
  // import '@umoteam/editor/style'

  export default {
    components: {
      UmoViewer
    },
    data() {
      return {
        options: {
          // options
          // ...
        }
      }
    }
  }
</script>
```

--------------------------------

### Configure AI Chat Assistant with System Prompt and Welcome Message

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/chat.mdx

Sets up the AI Chat Assistant with a detailed system prompt defining the assistant's role as a professional document AI helper, along with a welcome message. The system prompt includes instructions for context analysis, output formatting, exception handling, and execution examples to guide the AI's behavior during document editing tasks.

```javascript
const systemPrompt = `**角色定位**
你是一个专业文档 AI 助手，具备以下核心能力：
1. 精准解析用户碎片化需求
2. 上下文敏感的内容整合
3. 多维度文档质量把控
4. Markdown语法专家级应用

**任务说明**
当前用户正在富文本编辑器(基于 Tiptap 和 ProseMirror 开发)中进行文档创作，你需要完成以下协同工作流程：

**输入分析阶段**
1. 深度理解用户提供的上下文片段（即用户所选择的内容）：{context}
2. 通读当前完整文档：
\`\`\`html
{document}
\`\`\`
3. 确认目标语言要求：{lang}（需确保语法地道性）
4. 识别用户未明示的潜在需求：
   - 格式一致性检查
   - 逻辑连贯性增强
   - 术语统一性维护

**输出规范**
请按以下标准生成内容：
▢ 格式标准：
   - 严格使用基础Markdown语法，但不能将内容整个返回成代码块
   - 标题层级不超过### 
   - 列表项采用标准符号
   - 代码块标注语言类型

▢ 内容标准：
   - 保持与现有文档风格统一
   - 新增内容自然衔接上下文
   - 重要信息优先呈现原则
   - 技术文档需保持术语准确

**异常处理机制**
当遇到以下情况时：
1. 需求存在歧义
2. 上下文信息不足
3. 发现文档内在矛盾
请主动询问澄清：
"为确保输出质量，需要您确认以下细节：[具体问题] 请提供补充说明/示例/偏好要求"

**执行示例**
[用户需求] "在第三章添加数据可视化注意事项"
[AI响应] 
1. 定位第三章现有内容
2. 分析文档中已有的图表规范
3. 生成符合整体风格的注意事项列表
4. 使用与前后文匹配的过渡语句

只需要返回结果，不要将结果放在代码块中，无需其他任何额外说明，除非用户要求，返回内容尽量不要太过复杂。
`

const welcomeMessage = '欢迎使用 Umo Editor AI 聊天助手！有什么问题可以问我哦，我会尽力帮助您完成文档编辑工作。'
```

--------------------------------

### Start Umo Editor Server Development Mode

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/index.mdx

Start the Umo Editor Server in development mode using npm. After execution, the server will be available at http://127.0.0.1:1235/docs where you can view the Swagger API documentation.

```bash
npm run dev
```

--------------------------------

### Direct Umo-Editor Inclusion in Vue Component

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/getting-started.mdx

Includes the Umo-Editor component directly within a Vue component, allowing for local registration. Supports both Composition API and Options API. The component is imported and then used in the template, with configuration passed via props.

```vue
<template>
  <umo-editor v-bind="options" />
  <!-- Or -->
  <!-- 
  <umo-editor 
    :editor-key="options.editorKey" 
    ... 
  /> -->
</template>

// Using Composition API
<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // Configuration options
    // ...
  });
</script>

// Or using Options API
<script>
  import { UmoEditor } from '@umoteam/editor';

  export default {
    components: {
      UmoEditor
    },
    data() {
      return {
        options: {
          // Configuration options
          // ...
        }
      }
    }
  }
</script>
```

--------------------------------

### Toolbar Extension Group Configuration Example

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/toolbar.mdx

Provides an example of how to configure toolbar extension groups, including their display title and unique key. The 'key' is crucial for slot injection and must be unique.

```javascript
extensions: [
  { title: 'Office Assistant', key: 'office' },
  { title: 'Extension Plugins', key: 'plugins' },
]
```

--------------------------------

### AI Chat Assistant Model Configuration Example (JavaScript)

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/chat.mdx

Provides an example of how to configure AI models for the AI Chat Assistant. It demonstrates settings for DeepSeek and Moonshot AI, including model identifiers, display labels, avatars, provider endpoints, token inclusion, reasoning support, and file upload capabilities.

```javascript
[
  // DeepSeek
  {
    label: 'DeepSeek-R1',
    value: 'deepseek-reasoner',
    avatar: '...',
    isDefault: true,
    // In this example, Umo Editor Server proxies AI requests to other providers, but you can customize the provider
    provider: 'http://127.0.0.1:1235/ai/deepseek/chat%2Fcompletions',
    withToken: true,
    supportReason: true,
    file: {
      accept: '.docx,.doc,.xls,.xlsx,.txt', // Supported file types
      multiple: true, // Allow multiple file selection
      maxSize: 1024 * 1024 * 5, // Max size per file
      limit: 5, // Maximum number of files
    },
  },
  // Moonshot AI
  {
    label: 'Moonshot AI',
    value: 'moonshot-v1-8k',
    avatar: kimiLogo,
    provider: 'http://127.0.0.1:1235/ai/moonshot/chat%2Fcompletions',
    withToken: true,
  },
]
```

--------------------------------

### Clone Umo Editor Server Repository

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/index.mdx

Clone the official Umo Editor Server private repository to your local machine. This is the first step to obtain the source code for installation and deployment.

```bash
git clone <Umo Editor Server official private repository URL>
```

--------------------------------

### Start Umo Office Convert Docker container

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-convert/docker.mdx

Launches a Docker container running Umo Office Convert in detached mode, mapping port 1236 on the host to port 1236 in the container. Execute from the project root directory to start the service.

```bash
docker run -d --name umo-office-convert -p 1236:1236 umo-office-convert:latest
```

--------------------------------

### Page Aside Extensions Configuration Example

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/aside.mdx

Illustrates the configuration for extending the page aside with custom content groups, specifying a title and a unique key for each extension.

```javascript
aside: {
  extensions: [
    // Each item in the array represents a new group
    { title: 'Office Assistant', key: 'office' },
    { title: 'Extension Plugins', key: 'plugins' },
  ],
}
```

--------------------------------

### GET /static - Static Files

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/api.mdx

Serves static files including Umo Editor Next bundled files and external dependencies. Can be used to configure the cdnUrl option.

```APIDOC
## GET /static

### Description
Serves static files including Umo Editor Next bundled files and dependencies.

### Method
GET

### Endpoint
/static

### Common Paths
- `/static` - Main CSS file of Umo Editor Next (configurable for cdnUrl option)
- `/static/next/7.1.0/style.css` - Style file for export.styleURL option
- `/static/next/[version]/[resource]` - Umo Editor Next resources
- Other static assets and @umoteam/editor-external files

### Response
#### Success Response (200)
- **content** (binary) - Static file content
- **content-type** (string) - Appropriate MIME type (text/css, application/javascript, etc.)

### Note
These endpoints can be used to configure the cdnUrl and export.styleURL options in Umo Editor Next.
```

--------------------------------

### GET /docs - Open API Documentation

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/api.mdx

Provides interactive Swagger API documentation for viewing and testing interfaces. This endpoint is not available in the production environment and is accessible at http://127.0.0.1:1235/docs during development.

```APIDOC
## GET /docs

### Description
Provides Swagger UI interface for API documentation and testing.

### Method
GET

### Endpoint
/docs

### Response
#### Success Response (200)
- **content** (html) - Swagger UI interface

### Note
Not available in production environment. Access at http://127.0.0.1:1235/docs in development.
```

--------------------------------

### GET /icons - List Available Icons

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/api.mdx

Returns a list of all available icon information that can be used within Umo Editor.

```APIDOC
## GET /icons

### Description
Retrieves all available icon information.

### Method
GET

### Endpoint
/icons

### Response
#### Success Response (200)
- **icons** (array) - List of available icons
  - **name** (string) - Icon name
  - **url** (string) - Icon URL

### Response Example
{
  "icons": [
    {
      "name": "icon1",
      "url": "/static/icons/icon1.svg"
    }
  ]
}
```

--------------------------------

### GET / - Check Service Status

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/api.mdx

Returns information about whether the Umo Editor Server service is running. If this endpoint is inaccessible, it indicates that the service is not started or is experiencing issues.

```APIDOC
## GET /

### Description
Checks the service status of the Umo Editor Server.

### Method
GET

### Endpoint
/

### Response
#### Success Response (200)
- **status** (string) - Service status indicator

#### Response Example
{
  "status": "running"
}
```

--------------------------------

### Get Umo Editor Page Configuration

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/methods.mdx

Retrieves the current page configuration settings of the Umo Editor. This method returns an object containing details about the page setup. Added in v5.0.0.

```JavaScript
// Assuming 'editorInstance' is a reference to the Umo Editor instance
const pageConfig = editorInstance.getPage();
console.log(pageConfig);
```

--------------------------------

### Vue Example: Get Umo Editor Configuration

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/methods.mdx

Demonstrates how to retrieve the current configuration options of the Umo Editor component in a Vue.js application. It utilizes a ref to access the editor instance and calls the getOptions method.

```Vue
<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="getOptions">Get Configuration</button>
</template>

<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const editorRef = ref(null);
  const options = ref({
    // Configuration options
    // ...
  })

  const getOptions = () => {
    const options = editorRef.value.getOptions();
    console.log(options);
  }
</script>
```

--------------------------------

### Vue Component for Umo Editor Theming Example

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/themes.mdx

This Vue.js component demonstrates how to apply custom theme variables to Umo Editor. It shows a basic setup with a `UmoEditor` component and a `theme-demo` class where specific CSS variables, like `--umo-primary-color`, can be overridden.

```vue
<template>
  <div class="theme-demo">
    <umo-editor />
  </div>
</template>

<script setup>
import { UmoEditor } from '@umoteam/editor'
</script>

<style>
.theme-demo {
  --umo-primary-color: red;
  /* ... */
}
</style>

```

--------------------------------

### Configure Environment Variables in .env File

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/index.mdx

Set up environment variables for Umo Editor Server including service port, database path, collaboration settings, and AI API keys. Create a .env file in the project root directory with the following configuration template for development environment setup.

```bash
NODE_ENV = development

## Service related
PORT = 1235
SERVER_NAME = Umo Editor Server

## Log related
LOG_DIR = ./logs

## Database related
SQLITE_DB_PATH = ./db
SQLITE_DB_NAME = umo-editor-server.sqlite

## Collaboration related
DOC_SAVE_INTERVAL = 5000 # Unit: milliseconds

## AI related
DEEPSEEK_API_KEY = your-api-key
DEEPSEEK_API_URL = https://api.deepseek.com/v1
OPENAI_API_KEY = your-api-key
OPENAI_API_URL = https://api.openai.com/v1
MOONSHOT_API_KEY = your-api-key
MOONSHOT_API_URL = https://api.moonshot.cn/v1
```

--------------------------------

### Umo Editor Notifications Setup and Usage - Vue 3

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/notifications.mdx

Complete Vue 3 example demonstrating how to use the useAlert, useConfirm, and useMessage notification methods with Umo Editor. The editor reference is used to call notification methods with customizable themes, headers, and body content. useConfirm provides callback handling with a destroy method for cleanup.

```vue
<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="useAlert">useAlert</button>
  <button @click="useConfirm">useConfirm</button>
  <button @click="useMessage">useMessage</button>
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const editorRef = ref(null);
  const options = ref({
    // Configuration options
    // ...
  })

  // Use Alert
  const useAlert = () => {
    editorRef.value.useAlert({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
    })
  }

  // Use Confirm
  const useConfirm = () => {
    const confirm = editorRef.value.useConfirm({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
      onConfirm() {
        confirm.destroy()
      },
    })
  }

  // Use Message
  const useMessage = () => {
    editorRef.value.useMessage('info', {content: 'Hello World'})
  }
</script>
```

--------------------------------

### GET /template/:id - Get Template Details

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/api.mdx

Retrieves detailed information for a specific template by its ID.

```APIDOC
## GET /template/:id

### Description
Retrieves detailed information for a specific template.

### Method
GET

### Endpoint
/template/:id

### Path Parameters
- **id** (string) - Required - Template identifier

### Response
#### Success Response (200)
- **id** (string) - Template identifier
- **name** (string) - Template name
- **description** (string) - Template description
- **content** (object) - Template content

### Response Example
{
  "id": "template1",
  "name": "Template 1",
  "description": "Description of template 1",
  "content": {}
}
```

--------------------------------

### Global Configuration with Template Examples

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/options/templates.mdx

Demonstrates how to configure document templates in global configuration with multiple template objects. Each template includes a title, description, and HTML content that users can select to insert into documents.

```javascript
{
  templates: [
    {
      title: 'Work Task',
      description: 'Work task template',
      content: '<p>Work Task</p>',
    },
    {
      title: 'Weekly Report',
      description: 'Weekly report template',
      content: '<h2>Work Task</h2>',
    },
  ]
}
```

--------------------------------

### startTypewriter Method

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/next/methods.mdx

Initiates a typewriter animation effect to insert content into the document. Displays text with character-by-character animation with configurable speed and step size.

```APIDOC
## startTypewriter

### Description
Inserts content with typewriter animation effect.

### Method
Instance Method

### Parameters
- **content** (Object) - Required - Umo Editor recognizable JSON format data to insert
- **options** (Object) - Optional - Typewriter animation configuration
  - **speed** (Number) - Interval time (ms) between each character keystroke
  - **step** (Number) - Number of characters displayed per keystroke. Recommend keeping this relatively small for optimal effect
  - **onComplete** (Function) - Callback function executed when typewriter animation completes

### Returns
- (void) - No return value

### Usage Example
```javascript
const content = { type: "doc", content: [/* JSON structure */] };

editor.startTypewriter(content, {
  speed: 100,
  step: 1,
  onComplete: () => {
    console.log("Typewriter animation complete");
  }
});
```
```

--------------------------------

### startTypewriter Method

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/methods.mdx

Initiates a typewriter animation effect that inserts content into the document character by character. This method creates an engaging visual effect by progressively displaying content at a controlled speed with customizable step lengths and completion callbacks.

```APIDOC
## startTypewriter

### Description
Insert content with typewriter effect, displaying text character by character.

### Method
Instance Method

### Parameters
- **content** (Object) - Required - JSON format data that Umo Editor can recognize.
- **options** (Object) - Optional - Typewriter animation configuration:
  - **speed** (Number) - Interval time (in milliseconds) for typewriter text input.
  - **step** (Number) - Typewriter step length, the number of characters displayed each time. Recommended to keep reasonably short for optimal effect.
  - **onComplete** (Function) - Callback function invoked after typewriter completion.

### Return Value
None

### Usage Example
```javascript
const content = { /* Umo Editor JSON data */ };
editor.startTypewriter(content, {
  speed: 100,
  step: 1,
  onComplete: () => console.log("Typewriter finished")
});
```
```

--------------------------------

### Default Server Configuration Options (JavaScript)

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/server.mdx

Provides the default configuration object for the Umo Editor Server. This object includes settings for host, SSL, and token, which are essential for the server's operation and security. Ensure these options are correctly set based on your deployment environment.

```javascript
const defaultOptions = {
  // Server-related configuration, Added in v7.1.0
  server: {
    host: '',
    ssl: false,
    token: ''
  },
}
```

--------------------------------

### GET | POST /ai/{provider}/{endpoint} - AI Service Provider Proxy

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/api.mdx

Dynamically proxies GET and POST requests to different AI service providers (e.g., DeepSeek, OpenAI, Moonshot AI) based on the provider and endpoint parameters. Forwards requests and returns responses from the specified AI service.

```APIDOC
## GET | POST /ai/{provider}/{endpoint}

### Description
Dynamically proxies requests to specified AI service providers.

### Methods
GET, POST

### Endpoint
/ai/{provider}/{endpoint}

### Path Parameters
- **provider** (string) - Required - AI service provider name (e.g., DeepSeek, OpenAI, Moonshot AI)
- **endpoint** (string) - Required - API endpoint on the provider service

### Request Body (for POST)
- **payload** (object) - Optional - Request data to forward to AI provider

### Response
#### Success Response (200)
- **data** (object) - Response from the AI service provider

### Note
This interface forwards requests to the specified AI service provider and returns the response. Configuration and implementation details are available in the source code.
```

--------------------------------

### Configure IP/Domain Whitelist in .env

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/index.mdx

Set up whitelist configuration for Umo Editor Server to control access by specifying allowed IP addresses or domain names. Access requests from sources not in the whitelist will be denied. Provide comma-separated values with IP addresses or domain hostnames (no protocol or port).

```bash
WHITE_LIST = 127.0.0.1, 0.0.0.0, localhost, example.com
```

--------------------------------

### GET /template - List Templates

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/api.mdx

Retrieves a list of all available templates that can be used with Umo Editor.

```APIDOC
## GET /template

### Description
Retrieves all available templates.

### Method
GET

### Endpoint
/template

### Response
#### Success Response (200)
- **templates** (array) - List of template objects
  - **id** (string) - Template identifier
  - **name** (string) - Template name
  - **description** (string) - Template description

### Response Example
{
  "templates": [
    {
      "id": "template1",
      "name": "Template 1",
      "description": "Description of template 1"
    }
  ]
}
```

--------------------------------

### Load Docker Image from Tar Archive

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/server/docker.mdx

Loads a pre-built Docker image from a tar file into the local Docker daemon. This command must be executed in the project root directory where the tar archive is located.

```bash
docker load -i ./docker/umo-editor-server.tar
```

--------------------------------

### Load Docker image from tar archive

Source: https://github.com/umodoc/docs/blob/main/pages/cn/docs/office-convert/docker.mdx

Loads a pre-built Docker image from a tar archive file into the Docker daemon. Execute this command from the project root directory to import the `umo-office-convert.tar` image for local deployment.

```bash
docker load -i ./docker/umo-office-convert.tar
```

--------------------------------

### GET /api/collaboration/getCollaboration

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/next/collaboration.mdx

Retrieves information about the current online collaboration status, including connected users and provider details.

```APIDOC
## GET /api/collaboration/getCollaboration

### Description
Retrieves information related to online collaboration. This includes the connection status to the collaboration provider, the list of users currently editing the document, and details about the provider itself, which can be used to hook into various events for custom functionality.

### Method
GET

### Endpoint
/api/collaboration/getCollaboration

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **connect** (Boolean) - Indicates if the connection to the collaboration provider was successful.
- **user** (Array) - A list of users currently collaborating on the document.
- **provider** (Object) - Information about the service provider. This object allows listening to events for custom features.

#### Response Example
```json
{
  "connect": true,
  "user": [
    {
      "name": "Alice",
      "id": "user-123"
    },
    {
      "name": "Bob",
      "id": "user-456"
    }
  ],
  "provider": {
    "name": "Hocuspocus",
    "version": "1.0.0"
  }
}
```
```

--------------------------------

### Umo Viewer Default Configuration Object

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/viewer/options.mdx

Complete default configuration object for initializing Umo Viewer with all available options. This object defines language, theme, preview modes, document content sources, and feature toggles for controlling viewer behavior and UI display.

```javascript
{
  lang: 'zh-CN',
  theme: 'light',
  mode: ['html', 'pdf'],
  title: undefined,
  meta: [],
  showHeader: true,
  showAside: false,
  editable: false,
  printable: true,
  downloadable: true,
  closeable: false,
  shareUrl: undefined,
  html: undefined,
  pdf: undefined,
  showMultiPage: false,
  fitWidth: false,
  needPassword: false,
}
```

--------------------------------

### Get Umo Editor Page Screenshot

Source: https://github.com/umodoc/docs/blob/main/pages/en/docs/editor/methods.mdx

Captures a screenshot of the Umo Editor page. The output format can be specified as 'blob', 'jpeg', or 'png'.

```javascript
getImage(format: 'blob' | 'jpeg' | 'png')
```