Images
Les images permettent d’enrichir le contenu des documents, d’améliorer leur expression visuelle et d’illustrer ou de mettre en évidence des informations importantes.
Habillage du texte autour d’une image
Changez la disposition et observez le texte à côté et sous l’image.
Univer Docs
Univer Docs réunit texte, images et mise en page dans un document modifiable. Les titres organisent les idées et les images en expliquent les détails. Le style d’habillage détermine le parcours du texte. Choisissez une disposition qui conserve un ordre de lecture clair quand le contenu évolue.
L’habillage carré fait circuler le texte autour du rectangle de l’image.
Mode plugin
Installation
pnpm add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uinpm install @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uiyarn add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uibun add @univerjs/drawing @univerjs/drawing-ui @univerjs/docs-drawing @univerjs/docs-drawing-uiUtilisation
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)Si vous utilisez la fonctionnalité de Collaboration, vous devez ajouter la configuration override :
univer.registerPlugin(UniverDrawingPlugin, { override: [[IImageIoService, null]], })Prise en charge mobile
Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs/docs-drawing-ui | UniverDocsDrawingUIPlugin | UniverDocsDrawingMobileUIPlugin |
@univerjs/drawing-ui | UniverDrawingUIPlugin | UniverDrawingMobileUIPlugin |
Mode prédéfini
Installation
pnpm add @univerjs/preset-docs-drawingnpm install @univerjs/preset-docs-drawingyarn add @univerjs/preset-docs-drawingbun add @univerjs/preset-docs-drawingUtilisation
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(), ],})Si vous utilisez la fonctionnalité de Collaboration, veillez à transmettre l’option collaboration: true à UniverDocsDrawingPreset :
UniverDocsDrawingPreset({ collaboration: true, })API Facade
En mode plugin, importez d'abord l'extension Facade :
import '@univerjs/docs-drawing/facade'Utilisez FDocument pour insérer, rechercher et gérer les images du document :
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()L'objet FDocumentImage renvoyé permet de redimensionner, faire pivoter, repositionner, réorganiser ou supprimer l'image.
Que pensez-vous de ce guide ?