@aurigma/design-editor-iframe
Version:
Using this module you can embed Design Editor (a part of Customer's Canvas) to your page through the IFrame API.
120 lines (119 loc) • 4.68 kB
TypeScript
import { IProductDefinition } from "./ObjectModel/ObjectModel";
import { IConfiguration } from "./Configuration/ConfigurationInterfaces";
import { Editor } from "./Editor";
declare global {
interface Window {
CustomersCanvas: {
IframeApi: {
editorUrl: string;
};
};
}
}
/**
* URL to your Customer's Canvas instance.
* @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.
* @example
* ``` js
* <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>
* ```
* @public
*/
export declare let editorUrl: string;
/** @internal */
export declare function setEditorUrl(url: string): void;
/**
* Loads the web-to-print editor.
* @param editorFrame - The iframe element to place the editor to.
* @param product - The product to load into the editor.
* @param config - Editor configuration.
* @param onFirstLoad - <em>Outdated.</em> A function that handles the first product launch. For details, see {@link https://customerscanvas.com/dev/editors/iframe-api/customization/preloader.html|Preloader} topic.
* @returns An instance of the web-to-print editor.
* @example
* ``` 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>
* ```
* @public
*/
export declare function loadEditor(editorFrame: HTMLIFrameElement, product: string | string[] | IProductDefinition, config?: IConfiguration, onFirstLoad?: () => void): Promise<Editor>;
/**
* Preloads resources of the web-to-print editor.
* @example
* ``` html
* <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>
* ```
* @public
*/
export declare function preload(): void;
/** @internal */
export declare function loadEditorByQueryString(editorFrame: HTMLIFrameElement, queryString: string, onFirstLoad?: () => void): Promise<Editor>;
/** @internal */
export declare function _createPreConfiguredEditor(editorFrame: HTMLIFrameElement): Editor;
/** @internal */
export declare class QueryString {
value: string;
constructor(value: string);
getDeserializedObject(): {
key: string;
value: string;
}[];
}
/** @public */
export declare class StateId {
value: string;
constructor(value: string);
}