Imágenes
Las imágenes se pueden utilizar para enriquecer el contenido del documento, mejorar la expresión visual y ayudar a ilustrar o resaltar información clave.
Ajuste del texto alrededor de una imagen
Cambia la disposición y observa el texto junto a la imagen y debajo de ella.
Univer Docs
Univer Docs combina texto, imágenes y diseño de página en un documento editable. Los títulos organizan las ideas y las imágenes explican los detalles. El estilo de ajuste controla el flujo del texto. Elige una disposición que mantenga un orden de lectura claro al modificar el contenido.
El ajuste cuadrado permite que el texto fluya junto al rectángulo de la imagen.
Modo predeterminado
Instalación
pnpm add @univerjs/preset-docs-drawingnpm install @univerjs/preset-docs-drawingyarn add @univerjs/preset-docs-drawingbun add @univerjs/preset-docs-drawingUso
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 está utilizando la función Colaboración, asegúrese de pasar la opción collaboration: true en UniverDocsDrawingPreset:
UniverDocsDrawingPreset({ collaboration: true, })Modo de complemento
Instalación
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-uiUso
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 está utilizando la función Colaboración, debe agregar la configuración override:
univer.registerPlugin(UniverDrawingPlugin, { override: [[IImageIoService, null]], })Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs/docs-drawing-ui | UniverDocsDrawingUIPlugin | UniverDocsDrawingMobileUIPlugin |
@univerjs/drawing-ui | UniverDrawingUIPlugin | UniverDrawingMobileUIPlugin |
API Facade
En modo plugin, importe primero la extensión Facade:
import '@univerjs/docs-drawing/facade'Use FDocument para insertar, consultar y administrar imágenes del documento:
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()El FDocumentImage devuelto permite cambiar tamaño, rotación, posición, ajuste y orden de capas, o eliminar la imagen.
¿Cómo es esta guía?