Floating Images

Insert floating images, support drag to adjust size and position.

Installation

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

Import

import '@univerjs/drawing-ui/lib/index.css';
import '@univerjs/docs-drawing-ui/lib/index.css';
 
import { UniverDrawingPlugin } from '@univerjs/drawing';
import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui';
import { UniverDocsDrawingPlugin} from '@univerjs/docs-drawing';
import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui';

Internationalization

import { LocaleType, Tools } from '@univerjs/core';
import DrawingUIEnUS from '@univerjs/drawing-ui/locale/en-US';
import DocsDrawingUIEnUS from '@univerjs/docs-drawing-ui/locale/en-US';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      DrawingUIEnUS,
      DocsDrawingUIEnUS
    ),
  },
});

Register

When not using the collaborative plugin, the registration code is as follows:

univer.registerPlugin(UniverDrawingPlugin);
univer.registerPlugin(UniverDrawingUIPlugin);
univer.registerPlugin(UniverDocsDrawingPlugin);
univer.registerPlugin(UniverDocsDrawingUIPlugin);

When using the collaborative plugin, the registration code is as follows:

import { IImageIoService } from '@univerjs/drawing'
 
univer.registerPlugin(UniverDrawingPlugin, {
  override: [[IImageIoService, null]], // The collaborative plugin will provide this implementation
});
univer.registerPlugin(UniverDrawingUIPlugin);
univer.registerPlugin(UniverDocsDrawingPlugin);
univer.registerPlugin(UniverDocsDrawingUIPlugin);

Hyperlink Thread Comment