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 DocsDrawingUIJaJP from '@univerjs/docs-drawing-ui/locale/ja-JP'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIJaJP from '@univerjs/drawing-ui/locale/ja-JP'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/docs-drawing-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      DrawingUIJaJP,       DocsDrawingUIJaJP,     ),  },})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 UniverPresetDocsCoreJaJP from '@univerjs/preset-docs-core/locales/ja-JP'import { UniverDocsDrawingPreset } from '@univerjs/preset-docs-drawing'import UniverPresetDocsDrawingJaJP from '@univerjs/preset-docs-drawing/locales/ja-JP'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.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetDocsCoreJaJP,      UniverPresetDocsDrawingJaJP,     ),  },  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.