Web SDK

圖片

圖片可用於豐富文件內容、增強視覺表達和幫助說明或突出重點資訊。

圖文環繞示意

切換版面配置，觀察圖片旁邊和下方的文字如何流動。

Univer Docs

Univer Docs 將文字、圖片與頁面配置組合成可編輯的文件。標題讓內容層次清楚，圖片協助解釋細節。環繞方式決定附近文字如何流動。選擇合適的配置，可以在修改內容時維持清楚的閱讀順序。試著切換圖片的環繞方式，比較段落位置、行距和留白的變化。

矩形環繞允許文字沿圖片的矩形邊界排列。

外掛模式

安裝

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 DocsDrawingUIZhTW from '@univerjs/docs-drawing-ui/locale/zh-TW'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIZhTW from '@univerjs/drawing-ui/locale/zh-TW'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/docs-drawing-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_TW,  locales: {    [LocaleType.ZH_TW]: mergeLocales(      DrawingUIZhTW,       DocsDrawingUIZhTW,     ),  },})univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverDrawingUIPlugin)univer.registerPlugin(UniverDocsDrawingPlugin)univer.registerPlugin(UniverDocsDrawingUIPlugin)

如使用協同編輯功能，需要新增 override 配置：

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

行動裝置支援

先設定行動版編輯器。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。

套件桌面版註冊行動版註冊
@univerjs/docs-drawing-uiUniverDocsDrawingUIPluginUniverDocsDrawingMobileUIPlugin
@univerjs/drawing-uiUniverDrawingUIPluginUniverDrawingMobileUIPlugin

預設模式

安裝

Shell
pnpm add @univerjs/preset-docs-drawing

使用

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhTW from '@univerjs/preset-docs-core/locales/zh-TW'import { UniverDocsDrawingPreset } from '@univerjs/preset-docs-drawing'import UniverPresetDocsDrawingZhTW from '@univerjs/preset-docs-drawing/locales/zh-TW'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_TW,  locales: {    [LocaleType.ZH_TW]: mergeLocales(      UniverPresetDocsCoreZhTW,      UniverPresetDocsDrawingZhTW,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsDrawingPreset(),   ],})

如使用協同編輯功能，請確保在 UniverDocsDrawingPreset 中傳入 collaboration: true 選項。

TypeScript
UniverDocsDrawingPreset({  collaboration: true, })

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.