Running the code

Start as a stand alone

npm run start

Start as a local component

Build the project

npm run build

Go the the dist folder

cd dist

Run a local server

http-server -c-1

In case you don't have http server:

npm install -g http-server

API

Include the component js and css from: ADD URLS HERE

Once the libs are included in the code you can call the editor function via the global TE

Mount editor into an element

window.TE.mount(selector, apiKey, template);

| Param | Type | Description | | ----- | ---- | ----------- | | selector | String | The id or parent div to load the editor into | | apiKey | String | The API key of the user that uses the editor. The API key can be obtained from TE settings | | template | String | The Template param is optional. If not provided the te,plates side panel will be shown and the users will be able to pick any template in the account |

The Template parameter can be provided in two forms:

1. Template ID - can be copied from the editor, or via the API.
2. A url to TE Image API - in this case the template will be loaded with the values passed in the URL. This is useful if you want to load the template with predefined values and then edit some or all of them.

Editor as a popup

window.TE.popup(apiKey, template, callback)

| Param | Type | Description | | ----- | ---- | ----------- | | apiKey | String | The API key of the user that uses the editor. The API key can be obtained from TE settings | | template | String | The Template param is optional. If not provided the te,plates side panel will be shown and the users will be able to pick any template in the account | | callback | function | The callback function will be called when the user presses the "Save" button. The callback function return the image from the editor as a Base64 string.

// Populate the image from the editor into and <img> tag
window.TE.popup('API_KEY','TEMPLATE' , (img_base64)=>{
        const img = document.getElementById('image');
        img.src = img_base64;
    }
);