loadEditor

Callable

  • Loads the web-to-print editor.

    example
    <!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/SPEditor/Scripts/IFrame/IframeApi.js">
        </script>
    </head>
    
    <body>
        <!-- The iframe to display the editor into. -->
        <iframe id="editorFrame" width="100%" height="800px"></iframe>
    </body>
    
    <script>
        // Initializing product with only one template - "BusinessCard.psd".
        productDefinition = { surfaces: ["BusinessCard"] };
        // Getting the iframe element to display the editor into.
        var iframe = document.getElementById("editorFrame");
        var editor = null;
        // Loading the editor.
        CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
            // If the editor has been successfully loaded.
            .then(function (e) {
                editor = e;
            })
            // If there was an error thrown when loading the editor.
            .catch(function (error) {
                console.error("The editor failed to load with an exception: ", error);
            });
    </script>
    
    </html>
    

    Parameters

    • editorFrame: HTMLIFrameElement

      The iframe element to place the editor to.

    • product: string | string [] | IProductDefinition

      The product to load into the editor. You can configure the product through an IProductDefinition instance or construct it from one or more states. For the latter option you need to pass an array of strings (or a single string) that contains product stateIds previously returned by the Editor.finishProductDesign or Editor.saveProduct methods.

    • Optional config: IConfiguration

      Editor configuration.

    • Optional onFirstLoad: function

      A function that handles the first product launch. See the Product Loading Screen topic for details.

        • ( ) : void
        • Returns void

    Returns Promise < Editor >