Adobe Express Editor Component: Edit Existing Adobe Express Project

This guide will demonstrate how to launch a Express editor component. The editor will appear in an iframe, pre-loaded with a specified Adobe Express project.

editDesign()

The CCEverywhere object exposes the editDesign() method, which loads the Adobe Express editor component in an iframe, with an existing project pre-loaded.

Flow:

User triggers editDesign() function from within the host application, and the Adobe Express editor is loaded in an iframe.
To pre-load the editor with an existing project, you must pass the associated project ID to editDesignParams. This ID is returned in the project property of publishParams from the onPublish callback.

// Initialize SDK and save CCEverywhere object as ccEverywhere 
ccEverywhere.editDesign(
    {
        inputParams: { 
            projectId: CCX_PROJECT_ID 
        },
        callbacks: {
            onCancel: () => {},
            onError: (err) => {},
            onLoadStart: () => {},
            onLoad: () => {},
            onPublishStart: () => {},
            onPublish: (publishParams) => {},
        },
        modalParams: {},
        outputParams: { 
            outputType: "base64"
        },
    }
);
Copied to your clipboard
1// Initialize SDK and save CCEverywhere object as ccEverywhere 
2ccEverywhere.editDesign(
3    {
4        inputParams: { 
5            projectId: CCX_PROJECT_ID 
6        },
7        callbacks: {
8            onCancel: () => {},
9            onError: (err) => {},
10            onLoadStart: () => {},
11            onLoad: () => {},
12            onPublishStart: () => {},
13            onPublish: (publishParams) => {},
14        },
15        modalParams: {},
16        outputParams: { 
17            outputType: "base64"
18        },
19    }
20);

EditDesignParams

editDesign() takes an object of parameters, editDesignParams, composed of:

Property	Description	Type
modalParams	Define size of editor modal	ModalParams
inputParams	CC Express project ID to initialize editor component	EditInputParams
outputParams	Configure output type	CCXOutputParams
callbacks	Callback functions	Callbacks

The only required property is inputParams.projectId.

Example

Step 1: User clicks the "Edit project" button

The editDesign() function is called and passed inputParams.projectId, a set of callback functions in editDesignCallback.
A CC Express editor component is launched in an iframe, pre-loaded with that CC Express project.

Step 2: User finishes design and clicks "Save"

The project is again saved to the user's Adobe Express account in project folder appName as specified in the initialize() function.
The onPublish callback function is called. It passes the host application an object publishParams that includes the Express project ID (projectId) and image data representation (asset).
- The asset is saved and displayed in the image tag image-container. The associated project ID is also saved in a global variable so that we can pre-load it in an editor component later again via editDesign().

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Edit Project Sample</title>
  </head>  
  <body>
    <button id="edit-project-button">Edit project</button>
    <img id="image-container" height="420" width="420" />

    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
    <script type="text/javascript">
    // projectId should be saved from an earlier call to createDesign
    var projectId = SAVED_CCX_PROJECT_ID;
    var imageContainer = document.getElementById("image-container");
    const editButton = document.getElementById("edit-project-button");

    (() => {
        if (!window.CCEverywhere) {
            return;
        }
        const ccEverywhere = window.CCEverywhere.initialize({
            clientId: YOUR_CLIENT_ID,
            appName: PROJECT_NAME,
            appVersion: { major: 1, minor: 0 },
            platformCategory: 'web', 
            redirectUri: YOUR_REDIRECT_URI
        });
    })();

    editButton.addEventListener('click', () => {
        const editDesignCallback = {
            onCancel: () => {},
            onPublish: (publishParams) => {
                const localData = { project: publishParams.projectId, image: publishParams.asset.data };
                imageContainer.src = localData.image;
                projectId = localData.project;
            },
            onError: (err) => {
                console.error('Error received is', err.toString());
            },
        };
        ccEverywhere.editDesign(
            {
                inputParams: { projectId: projectId },
                callbacks: editDesignCallback
            }
        );
    });
    </script>
  </body> 
</html>
Copied to your clipboard
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>Edit Project Sample</title>
5  </head>  
6  <body>
7    <button id="edit-project-button">Edit project</button>
8    <img id="image-container" height="420" width="420" />
9
10    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
11    <script type="text/javascript">
12    // projectId should be saved from an earlier call to createDesign
13    var projectId = SAVED_CCX_PROJECT_ID;
14    var imageContainer = document.getElementById("image-container");
15    const editButton = document.getElementById("edit-project-button");
16
17    (() => {
18        if (!window.CCEverywhere) {
19            return;
20        }
21        const ccEverywhere = window.CCEverywhere.initialize({
22            clientId: YOUR_CLIENT_ID,
23            appName: PROJECT_NAME,
24            appVersion: { major: 1, minor: 0 },
25            platformCategory: 'web', 
26            redirectUri: YOUR_REDIRECT_URI
27        });
28    })();
29
30    editButton.addEventListener('click', () => {
31        const editDesignCallback = {
32            onCancel: () => {},
33            onPublish: (publishParams) => {
34                const localData = { project: publishParams.projectId, image: publishParams.asset.data };
35                imageContainer.src = localData.image;
36                projectId = localData.project;
37            },
38            onError: (err) => {
39                console.error('Error received is', err.toString());
40            },
41        };
42        ccEverywhere.editDesign(
43            {
44                inputParams: { projectId: projectId },
45                callbacks: editDesignCallback
46            }
47        );
48    });
49    </script>
50  </body> 
51</html>