Package @aurigma/design-editor-iframe

export declare function loadEditor(editorFrame: HTMLIFrameElement, product: string | string[] | IProductDefinition, config?: IConfiguration, onFirstLoad?: () => void): Promise<Editor>;

Parameters

Type	Name	Description
HTMLIFrameElement	editorFrame	The iframe element to place the editor to.
string \| string[] \| IProductDefinition	product	The product to load into the editor.
IConfiguration	config	Editor configuration.
() => void	onFirstLoad	Outdated. A function that handles the first product launch. For details, see Preloader topic.

Returns

Type	Description
Promise<Editor>	An instance of the web-to-print editor.

Examples

<!DOCTYPE html>

   <html lang="en">

   <head>
       <meta charset="utf-8" />
       <title>Customer's Canvas Quick Start Sample Page</title>
       <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
       <script id="CcIframeApiScript" type="text/javascript" src="/cc/Resources/Generated/IframeApi.js">
       </script>
       <!-- Preloading resources of the editor. -->
       <script>CustomersCanvas.IframeApi.preload();</script>
   </head>

   <body>
       <!-- The iframe to display the editor in. -->
       <iframe id="editorFrame" width="100%" height="800px"></iframe>
   </body>

   <script>
       // Initializing a product with only one template - "BusinessCard.psd".
       const productDefinition = { surfaces: ["BusinessCard"] };
       // Providing the tokenId, which is required in the Secure Mode.
       const config = { tokenId: "95c16577-75fe-4145-87ff-c0ba49d1a554" };
       // Getting the iframe element to display the editor in.
       const iframe = document.getElementById("editorFrame");
       // Loading the editor.
       const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, config)
           // If an error occurred while loading the editor.
           .catch(error => console.error("The editor failed to load with an exception: ", error));
   </script>

   </html>

preload()

Preloads resources of the web-to-print editor.

Declaration

export declare function preload(): void;

Returns

Type	Description
void

Examples

   <head>
       <meta charset="utf-8" />
       <title>Customer's Canvas Quick Start Sample Page</title>
       <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
       <script id="CcIframeApiScript" type="text/javascript" src="/cc/Resources/Generated/IframeApi.js">
       </script>
       <!-- Preloading resources of the editor. -->
       <script>CustomersCanvas.IframeApi.preload();</script>
   </head>

Variables

Cpd

Declaration

Cpd: RotataAlgorithmType

editorUrl

URL to your Customer's Canvas instance.

Declaration

editorUrl: string

Remarks

Typically, you do not have to specify this URL explicitly. If you add id="CcIframeApiScript" to the script tag which links the IframeApi.js, Design Editor automatically detects this URL from the script source. However, if for any reasons you do not want to use the id in the script tag, you can use this property to specify the URL to the Design Editor instance explicitly.

Examples

<script>
  CustomersCanvas = {
      IframeApi: {
          editorUrl: "http://example.com/"
      }
  };
</script>

<script type="text/javascript" src="http://example.com/Resources/Generated/IframeApi.js">
</script>

<script>
  //....
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
</script>

FinishButtonMode.Disabled

Disabled hides the button and enables the callback.

Declaration

Disabled: FinishButtonModeType

FinishButtonMode.Download

Download enables a debug mode that shows the button and disables the callback, but allows downloading the hi-res output.

Declaration

Download: FinishButtonModeType

FontListMode.Advanced

The Advanced mode allows users to select a font, set the font size, and change the font style.

Declaration

Advanced: FontListModeType

FontListMode.Simple

The Simple mode allows users to select a font and set the font size.

Declaration

Simple: FontListModeType

GallerySource.InMemorySource

Gallery assets are predefined and located in the memory.

Declaration

InMemorySource: GallerySourceType

ModelMode.Advanced

The Advanced mode provides all the functions of the web-to-print editor like adding, changing, and removing design elements.

Declaration

Advanced: ModelModeType

ModelMode.Simple

The Simple mode provides only basic functions like changing texts and images. It allows you for switching to the Advanced mode.

Declaration

Simple: ModelModeType

ModelMode.SimpleOnly

The SimpleOnly mode provides only basic functions. It does not allow you for switching to the Advanced mode.

Declaration

SimpleOnly: ModelModeType

ObjectInspectorPosition.Left

The Left position places the Object Inspector on the left of the canvas.

Declaration

Left: ObjectInspectorPositionType

ObjectInspectorPosition.Right

The Right position places the Object Inspector on the right of the canvas.

Declaration

Right: ObjectInspectorPositionType

PdfActionMode.Group

In this mode, a PDF file opens as a set of shapes and appears on the canvas as a group element.

Declaration

Group: PdfActionModeType

PdfActionMode.Shape

In this mode, a PDF file opens as a combination of shapes in one color and width. This mode eliminates raster images. To check if losses occur, you can use the shapeViolationsEnabled warning.

Declaration

Shape: PdfActionModeType

PdfActionMode.Vector

In this mode, a PDF file opens as a vector image.

Declaration

Vector: PdfActionModeType

PsdActionMode.Design

In this mode, a PSD file opens as a set of design elements.

Declaration

Design: PsdActionModeType

PsdActionMode.Group

In this mode, a PSD file opens as a group of design elements.

Declaration

Group: PsdActionModeType

PsdActionMode.Merged

In this mode, a PSD file opens as a merged raster image.

Declaration

Merged: PsdActionModeType

SvgActionMode.Clipart

In this mode, an SVG file opens as a combination of multicolor shapes and appears on the canvas as a shape element.

Declaration

Clipart: SvgActionModeType

SvgActionMode.Group

In this mode, an SVG file opens as a set of SVG paths and appears on the canvas as a group element.

Declaration

Group: SvgActionModeType

SvgActionMode.Shape

In this mode, an SVG file opens as a combination of shapes in one color and width and appears on the canvas as a shape element. This mode eliminates raster images. To check if losses occur, you can use the shapeViolationsEnabled warning.

Declaration

Shape: SvgActionModeType

SvgActionMode.Vector

In this mode, an SVG file opens as a vector image and appears on the canvas as an image element.

Declaration

Vector: SvgActionModeType

TextAlignment.Center

Align text along the center.

Declaration

Center: TextAlignmentType

TextAlignment.Justify

Align text along both the left and right edges.

Declaration

Justify: TextAlignmentType

TextAlignment.LastCenter

Justify text and center its last line.

Declaration

LastCenter: TextAlignmentType

TextAlignment.LastLeft

Justify text and align its last line to the left.

Declaration

LastLeft: TextAlignmentType

TextAlignment.LastRight

Justify text and align its last line to the right.

Declaration

LastRight: TextAlignmentType

TextAlignment.Left

Align text along the left edge.

Declaration

Left: TextAlignmentType

TextAlignment.Right

Align text along the right edge.

Declaration

Right: TextAlignmentType

Type Aliases

ButtonAction

The standard actions that can be assigned to toolbox buttons. The "RichText" button action is deprecated, since every text element may support rich formatting in Customers Canvas 6.

Declaration

export declare type ButtonAction = "QrCode" | "LinearBarcode" | "DataMatrixBarcode" | // Qr codes
"Line" | "Rectangle" | "Ellipse" | // Shapes
"Text" | "RichText" | "BoundedText" | "CustomText" | "PointText" | // Text items
"Image" | "Background" | "BackgroundParams" | "Layout" | "FillPlaceholders" | "State" | // Galleries
"Custom";

ButtonType

A button type.

Declaration

export declare type ButtonType = IButton | SingleButtonType;

CustomButton

Declaration

export declare type CustomButton = {
    translationKey: string;
    translationKeyTitle: string;
    iconUrl: string;
    action?: string;
    buttonId: string;
    customData: any;
};

FinishButtonModeType

Defines the behavior of the Finish button.

Declaration

type FinishButtonModeType = "Disabled" | "Download" | "Post";

FontListModeType

Defiles whether the user can change only the font size or all the font style settings.

Declaration

type FontListModeType = "Simple" | "Advanced";

GallerySource.GallerySourceType

Sources of the Gallery widget.

Declaration

type GallerySourceType = "InMemorySource";

GroupsMode.GroupsModeType

Base only groups elements, whereas Smart also applies the auto layout to grouped elements.

Declaration

type GroupsModeType = "Base" | "Smart";

ModelModeType

Defiles whether the user can change the product layout or only the content of provided elements.

Declaration

type ModelModeType = "Simple" | "Advanced" | "SimpleOnly";

ObjectInspectorPositionType

Defines where to display the Object Inspector.

Declaration

type ObjectInspectorPositionType = "Left" | "Right";

PdfActionModeType

PDF upload modes.

Declaration

type PdfActionModeType = "Shape" | "Vector" | "Group";

PsdActionModeType

Defines how to upload PSD iles.

Declaration

type PsdActionModeType = "Merged" | "Design" | "Group";

RotataAlgorithmType

Declaration

export declare type RotataAlgorithmType = "Cpd";

SingleButtonType

A way of defining a button.

Declaration

export declare type SingleButtonType = ISingleButton | IGalleryButton | ButtonAction;

SurfaceTypes

Specifies product definitions used as arguments in the loadEditor method.

Declaration

export declare type SurfaceTypes = string | IPrintAreaTemplate | ISurfaceDefinition | ISurfaceTemplate | ISurfaceFromState;

SvgActionModeType

SVG upload modes.

Declaration

type SvgActionModeType = "Shape" | "Vector" | "Group" | "Clipart";

TextAlignmentType

Defines how to align text.

Declaration

type TextAlignmentType = "Left" | "Center" | "Right" | "Justify" | "LastLeft" | "LastRight" | "LastCenter";