Floating Images

Facade API	Paid Version	Univer Server	Univer on Node.js	Preset
-	-	-	-	UniverSheetsDrawingPreset

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/sheets-drawing - Sheet Drawing Plugin
@univerjs/sheets-drawing-ui - Sheet Drawing UI Plugin

Installation with Presets

import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
import { UniverSheetsDrawingPreset } from '@univerjs/presets/preset-sheets-drawing';
import UniverPresetSheetsDrawingEnUS from '@univerjs/presets/preset-sheets-drawing/locale/en-US';
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    enUS: Tools.deepMerge(
      {},
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS 
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset()
  ]
});

Advanced Installation

npm install @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui

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

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

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

import { LocaleType, Tools } from '@univerjs/core';
import { IImageIoService, UniverDrawingPlugin } from '@univerjs/drawing';
import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui';
import { UniverSheetsDrawingPlugin } from '@univerjs/sheets-drawing';
import { UniverSheetsDrawingUIPlugin } from '@univerjs/sheets-drawing-ui';
import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US';
import SheetsDrawingUIEnUS from '@univerjs/sheets-drawing-ui/locale/en-US';
 
import '@univerjs/drawing-ui/lib/index.css';
import '@univerjs/sheets-drawing-ui/lib/index.css';
 
import '@univerjs/sheets-drawing-ui/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      DrawingUIEnUS,
      SheetsDrawingUIEnUS,
    ),
  },
});
 
// When not using the collaborative plugin, the registration code is as follows:
univer.registerPlugin(UniverDrawingPlugin);
univer.registerPlugin(UniverDrawingUIPlugin);
univer.registerPlugin(UniverSheetsDrawingPlugin);
univer.registerPlugin(UniverSheetsDrawingUIPlugin);
 
// When using the collaborative plugin, the registration code is as follows:
univer.registerPlugin(UniverDrawingPlugin, {
  override: [[IImageIoService, null]], // The collaborative plugin will provide this implementation
});

Hyperlink Watermark