On attempting to integrate PhotoEditorSDK into an angular app for the first time, I'm seeing this error in the console.
My config is:
const container = document.getElementById('editor');
const editor = new $window.PhotoEditorSDK.UI.DesktopUI({
container: container,
license: '{ .. }',
assets: {
baseUrl: '/js/pesdk/assets' // <-- This should be the absolute path to your `assets` directory
},
editor: {
image: 'https://www.photoeditorsdk.com/assets/images/new/landingpage/platform_html5-4c8765e5.png',
},
style: {
width: 500,
height: 500,
},
});
The editor begins to load, the license call completes successfully, then I see:
react-dom.production.min.js:162 TypeError: t.addEventListener is not a function
at e._loadSource (PhotoEditorSDK.js:6)
at new e (PhotoEditorSDK.js:6)
at e.setImage (PhotoEditorSDK.js:73)
at e._setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at c (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
at e.componentDidMount (PhotoEditorSDK.UI.DesktopUI.js:27)
at commitLifeCycles (react-dom.production.min.js:148)
at b (react-dom.production.min.js:156)
at t (react-dom.production.min.js:167)
The non-minified "development" react-dom file looks minified also, so this is a pain to debug.
Right now the image
option must be an actual image object, not a string URL, that's the source of the error. So you need to first load the image, pass is it as an option and load the editor.
There is an angular demo project if you'd like to checkout: