Class EditorBuilder
Using this class you can load Editor instances to a specified iframe element and initialize them with a specified product and configuration.
Package: @aurigma/design-editor-iframe
Constructors
(constructor)(backendUrl)
Creates a new instance of the builder. Note, you may prefer to use a static method EditorBuilder.for() instead.
Declaration
constructor(backendUrl: string);Parameters
| Type | Name | Description |
|---|---|---|
| string | backendUrl |
a URL to your Design Editor instance (can be installed either on your server or hosted on Aurigma's servers). If you don't have it, contact Aurigma team at info@aurigma.com. |
Methods
build(target, productDefinition, config)
Builds an instance of Editor and loads it in a specified iframe element.
Declaration
build(target: HTMLIFrameElement, productDefinition: string | string[] | IProductDefinition, config: IConfiguration): Promise<Editor>;Parameters
| Type | Name | Description |
|---|---|---|
| HTMLIFrameElement | target |
the IFrame element where you want to load the editor. If another instance of an editor is already loaded, it will be automatically disposed. |
| string | string[] | IProductDefinition | productDefinition |
it can be either a IProductDefinition structure describing the template you want to load or a string (array of strings) containing the ID of state files. When multiple state files specified, they are merged to a single product. |
| IConfiguration | config |
the editor configuration described with the IConfiguration structure. |
Returns
| Type | Description |
|---|---|
| Promise<Editor> | The Editor class instance which allows manipulating the editor and its content. |
for(backendUrl)
The same as a constructor, but implemented as a static method.
Declaration
static for(backendUrl: string): EditorBuilder;Parameters
| Type | Name | Description |
|---|---|---|
| string | backendUrl |
a URL to your Design Editor instance (can be installed either on your server or hosted on Aurigma's servers). If you don't have it, contact Aurigma team at info@aurigma.com. |
Returns
| Type | Description |
|---|---|
| EditorBuilder |
Examples
You may think of this methods as a "syntax sugar" to make it possible creating the editor with a single line, like this:
const editor = EditorLoader.for('<your-URL>').build(...);
preload()
Creates an invisible iframe and preloads all Design Editor scripts inside it to cache them in a browser.
Declaration
preload(): Promise<void>;Returns
| Type | Description |
|---|---|
| Promise<void> |
Remarks
Use this method in scenarios when instead of calling the EditorBuilder.build() method in the beginning of a page lifecycle, you do it later (e.g. when the user clicks a sort of a "Personalize" button). In this case, you should call the EditorBuilder.preload() as early as possible. By the moment when you call EditorBuilder.build(), all Design Editor scripts will be loaded to the browser cache and the editor will be opened very quickly.
If you call the EditorBuilder.build() during the page initialization, there is no need to preload scripts.
Hint: Although this method is async, most likely you don't want to call it with await. You should just call it and let it work in the background.