Images
Images can be used to enrich document content, enhance visual expression, and help illustrate or highlight key information.
Preset Mode
Installation
Shell
pnpm add @univerjs/preset-docs-drawingShell
npm install @univerjs/preset-docs-drawingShell
yarn add @univerjs/preset-docs-drawingShell
bun add @univerjs/preset-docs-drawingUsage
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(), ],})If you are using the Collaboration feature, make sure to pass the collaboration: true option in UniverDocsDrawingPreset:
TypeScript
UniverDocsDrawingPreset({ collaboration: true, })Plugin Mode
Installation
Shell
pnpm add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uiShell
npm install @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uiShell
yarn add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uiShell
bun add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uiUsage
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)If you are using the Collaboration feature, you need to add the override configuration:
TypeScript
univer.registerPlugin(UniverDrawingPlugin, { override: [[IImageIoService, null]], })Facade API
In plugin mode, import the Facade extension first:
TypeScript
import '@univerjs/docs-drawing/facade'Use FDocument to insert, query, and manage document images:
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()The returned FDocumentImage can resize, rotate, reposition, rewrap, reorder, or remove the image.
How is this guide?