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-ui


pnpm add @univerjs/drawing @univerjs/docs-drawing @univerjs/drawing-ui @univerjs/docs-drawing-ui


yarn add @univerjs/drawing @univerjs/docs-drawing @univerjs/drawing-ui @univerjs/docs-drawing-ui


bun add @univerjs/drawing @univerjs/docs-drawing @univerjs/drawing-ui @univerjs/docs-drawing-ui


import { 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]],
});