Floating Images
| Facade API | Has Paid Plan | Univer Server | Univer on Node.js | Preset |
|---|---|---|---|---|
| - | - | - | - | UniverDocsDrawingPreset |
Insert floating images, support drag to adjust size and position.
This feature includes the following plugin packages:
@univerjs/drawing- Fundamental Drawing Plugin@univerjs/drawing-ui- Fundamental Drawing UI Plugin@univerjs/docs-drawing- Docs Drawing Plugin@univerjs/docs-drawing-ui- Docs Drawing UI Plugin
Presets Installation
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverDocsCorePreset } from '@univerjs/presets/preset-docs-core';
import UniverPresetDocsCoreEnUS from '@univerjs/presets/preset-docs-core/locales/en-US';
import { UniverDocsDrawingPreset } from '@univerjs/presets/preset-docs-drawing';
import UniverPresetDocsDrawingEnUS from '@univerjs/presets/preset-docs-drawing/locales/en-US';
import '@univerjs/presets/lib/styles/preset-docs-core.css'
import '@univerjs/presets/lib/styles/preset-docs-drawing.css'
const { univerAPI } = createUniver({
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
{},
UniverPresetDocsCoreEnUS,
UniverPresetDocsDrawingEnUS
),
},
theme: defaultTheme,
presets: [
UniverDocsCorePreset(),
UniverDocsDrawingPreset(),
],
});If you use the collaboration plugin at the same time, you need to pass the configuration:
- UniverDocsDrawingPreset()
+ UniverDocsDrawingPreset({ collaboration: true }),Piecemeal Installation
npm install @univerjs/drawing @univerjs/docs-drawing @univerjs/drawing-ui @univerjs/docs-drawing-uiimport { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverDrawingPlugin } from '@univerjs/drawing';
import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui';
import { UniverDocsDrawingPlugin} from '@univerjs/docs-drawing';
import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui';
import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US';
import DocsDrawingUIEnUS from '@univerjs/docs-drawing-ui/locale/en-US';
import '@univerjs/drawing-ui/lib/index.css';
import '@univerjs/docs-drawing-ui/lib/index.css';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
DrawingUIEnUS,
DocsDrawingUIEnUS
),
},
});
univer.registerPlugin(UniverDrawingPlugin);
univer.registerPlugin(UniverDrawingUIPlugin);
univer.registerPlugin(UniverDocsDrawingPlugin);
univer.registerPlugin(UniverDocsDrawingUIPlugin);If you use the collaboration plugin at the same time, you need to provide the override configuration:
univer.registerPlugin(UniverDrawingPlugin, {
override: [[IImageIoService, null]],
});Was this page helpful?