Web SDK

图片

图片可用于丰富文档内容、增强视觉表达和帮助说明或突出重点信息。

预设模式

安装

Shell
pnpm add @univerjs/preset-docs-drawing

使用

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'import { UniverDocsDrawingPreset } from '@univerjs/preset-docs-drawing'import UniverPresetDocsDrawingZhCN from '@univerjs/preset-docs-drawing/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-drawing/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      UniverPresetDocsCoreZhCN,      UniverPresetDocsDrawingZhCN,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsDrawingPreset(),   ],})

如使用协同编辑功能，请确保在 UniverDocsDrawingPreset 中传入 collaboration: true 选项。

TypeScript
UniverDocsDrawingPreset({  collaboration: true, })

插件模式

安装

Shell
pnpm add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-ui

使用

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsDrawingPlugin } from '@univerjs/docs-drawing'import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui'import DocsDrawingUIZhCN from '@univerjs/docs-drawing-ui/locale/zh-CN'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIZhCN from '@univerjs/drawing-ui/locale/zh-CN'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/docs-drawing-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      DrawingUIZhCN,       DocsDrawingUIZhCN,     ),  },})univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverDrawingUIPlugin)univer.registerPlugin(UniverDocsDrawingPlugin)univer.registerPlugin(UniverDocsDrawingUIPlugin)

如使用协同编辑功能，需要添加 override 配置：

TypeScript
univer.registerPlugin(UniverDrawingPlugin, {  override: [[IImageIoService, null]], })

Facade API

插件模式需要先导入 Facade 扩展：

TypeScript
import '@univerjs/docs-drawing/facade'

通过 FDocument 插入、查询和管理文档图片：

TypeScript
const document = univerAPI.getActiveDocument()const image = await document?.insertImage({  source: 'https://example.com/image.png',  imageSourceType: univerAPI.Enum.ImageSourceType.URL,  width: 320,  wrappingStyle: univerAPI.Enum.DocsImageWrappingStyle.INLINE,})document?.getImage(image?.getId() ?? '')document?.getImages()

返回的 FDocumentImage 可用于调整大小、旋转、定位、环绕方式、层级或删除图片。

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.