浮动图片

插入浮动图片，支持拖拽调整大小和位置。

安装

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

引入

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';

国际化

import { LocaleType, Tools } from '@univerjs/core';
import DrawingUIZhCN from '@univerjs/drawing-ui/locale/zh-CN';
import DocsDrawingUIZhCN from '@univerjs/docs-drawing-ui/locale/zh-CN';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      DrawingUIZhCN,
      DocsDrawingUIZhCN
    ),
  },
});

注册

不使用协同插件时，注册代码如下：

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

使用协同插件时，注册代码如下：

import { IImageIoService } from '@univerjs/drawing'
 
univer.registerPlugin(UniverDrawingPlugin, {
  override: [[IImageIoService, null]], // 协同插件将会提供该实现
});
univer.registerPlugin(UniverDrawingUIPlugin);
univer.registerPlugin(UniverDocsDrawingPlugin);
univer.registerPlugin(UniverDocsDrawingUIPlugin);

超链接评论 / 批注