插件结构

接下来我们以二维码插件为例，一步步了解以及开发一个二维码插件，插件的配置结构如下：

interface PluginParams {
  type: string; // 元素类型，也是唯一标识，比如：image，video，audio，effect...
  name: string; // 元素的名称，比如：图片，视频，音频...
  version: string; // 版本号
  ElementData: new (n: any) => BaseElement; // 创建元素的数据类
  Element: React.FC; // 预览区组件
  Options?: React.FC; // 编辑器对应的 编辑区组件
}

以二维码插件为例，我们需要构建一个qrcode文件目录

- qrcode
 |- config.ts  # 插件配置
 |- ElementData.ts # 元素的数据类
 |- Element.tsx # 预览区组件
 |- Options.tsx # 编辑区组件
 |- index.ts # 默认入口
 |- types.ts # TS类型定义