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 DocsDrawingUIEnUS from '@univerjs/docs-drawing-ui/locale/en-US'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/docs-drawing-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DrawingUIEnUS,       DocsDrawingUIEnUS,     ),  },})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 UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { UniverDocsDrawingPreset } from '@univerjs/preset-docs-drawing'import UniverPresetDocsDrawingEnUS from '@univerjs/preset-docs-drawing/locales/en-US'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.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetDocsCoreEnUS,      UniverPresetDocsDrawingEnUS,     ),  },  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.