🎉 v0.5.0 is released. Read more →
GuidesUniver DocsFeaturesFloating Images

Floating Images

Facade APIPaid VersionUniver ServerUniver on Node.jsPreset
✅---UniverDocsDrawingPreset

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

Presets Installation

import { Tools } from '@univerjs/core';
import { createUniver, defaultTheme, LocaleType } 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/locale/en-US';
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    enUS: Tools.deepMerge({
      {},
      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 }),

Advanced Installation

npm install @univerjs/drawing @univerjs/docs-drawing @univerjs/drawing-ui @univerjs/docs-drawing-ui
import { LocaleType, Tools } from '@univerjs/core';
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]: Tools.deepMerge(
      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]],
});
HyperlinkThread Comment