Изображения
Изображения помогают сделать содержимое документа нагляднее, улучшить визуальную подачу, проиллюстрировать или выделить ключевую информацию.
Обтекание изображения текстом
Переключите размещение и проследите за текстом сбоку и снизу изображения.
Univer Docs
Univer Docs объединяет текст, изображения и разметку страницы в редактируемом документе. Заголовки упорядочивают идеи, а изображения поясняют детали. Стиль обтекания управляет потоком текста. Выберите расположение, которое сохраняет понятный порядок чтения при изменении содержимого.
Обтекание вокруг рамки располагает текст рядом с прямоугольником изображения.
Режим плагинов
Установка
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-uiИспользование
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:
univer.registerPlugin(UniverDrawingPlugin, { override: [[IImageIoService, null]], })Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs/docs-drawing-ui | UniverDocsDrawingUIPlugin | UniverDocsDrawingMobileUIPlugin |
@univerjs/drawing-ui | UniverDrawingUIPlugin | UniverDrawingMobileUIPlugin |
Режим предустановки
Установка
pnpm add @univerjs/preset-docs-drawingnpm install @univerjs/preset-docs-drawingyarn add @univerjs/preset-docs-drawingbun add @univerjs/preset-docs-drawingИспользование
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(), ],})Если вы используете функцию совместного редактирования, обязательно передайте параметр collaboration: true в UniverDocsDrawingPreset:
UniverDocsDrawingPreset({ collaboration: true, })Facade API
В режиме плагина сначала импортируйте расширение Facade:
import '@univerjs/docs-drawing/facade'Используйте FDocument для вставки, поиска и управления изображениями документа:
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 позволяет менять размер, поворот, положение, обтекание и порядок слоёв, а также удалять изображение.
Насколько полезно это руководство?