Plugin Structure

Next, let's take the QR code plugin as an example to understand and develop a QR code plugin step by step. The configuration structure of the plugin is as follows:

tsx

interface PluginParams {
  type: string; // Element type, also the unique identifier, such as: image, video, audio, effect...
  name: string; // Element name, such as: Image, Video, Audio...
  version: string; // Version number
  ElementData: new (n: any) => BaseElement; // Create element data class
  Element: React.FC; // Preview area component
  Options?: React.FC; // Editor area component corresponding to the editor
}

Taking the QR code plugin as an example, we need to build a qrcode file directory

- qrcode
 |- config.ts  # Plugin configuration
 |- ElementData.ts # Element data class
 |- Element.tsx # Preview area component
 |- Options.tsx # Editor area component
 |- index.ts # Default entry
 |- types.ts # TS type definition

Plugin Structure ​

Plugin Structure