angular-email-editor
angular-email-editor copied to clipboard
unlayer
How to configure custom cloud storage or s3 bucket in angular project
Can someone help how to configure custom cloud storage or s3 bucket in the angular project?
@adeelraza There is no registerCallback event that is available in angular. Below are the steps: @ViewChild(EmailEditorComponent) private emailEditor: EmailEditorComponent; this.emailEditor.registerCallback gives undefined.
I have created a storage setting on the unlayer.com and then added javascript code in my angular project index.html, still the file is not getting uploaded to my custome s3 storage. It will be helpful, if you can show in example, how to configure custom file storage in angular project
<body>
<app-root></app-root>
<script src="https://editor.unlayer.com/embed.js"></script>
<script>
unlayer.init({
id: 'editor',
projectId: XXXX,
})
</script>
</body>
@yogeshbansal the Allowed Domain under your project settings must include the domain you are running the editor on.
@adeelraza : i have added the domain in allowed domain, still its not uploading image to my aws bucket. What's the best place to add the project id and id field. currently i am doing it in index.html, like i mentioned in earlier comment. and my angular template is like this
<div id="editor">
<email-editor (loaded)="editorLoaded($event)"></email-editor>
</div>
and in console i am getting this
VM599 embed.js:1 Uncaught Error: id or className must be provided.
at Module.c (VM599 embed.js:1)
at email-editor:23
Hey guys digging this one up again - Is there any way with the angular version to set the project id?
What would be a proper way to configure a custom storage in angular?
Did you manage to find out the answer?
You can pass projectId here:
<email-editor (loaded)="editorLoaded($event)" [projectId]="XXX"></email-editor>
Once you pass the projectId, our system can identify your project against the domain editor is running on. When verified, it will use the custom storage you have set up in your project.
You can pass
projectIdhere:<email-editor (loaded)="editorLoaded($event)" [projectId]="XXX"></email-editor>Once you pass the
projectId, our system can identify your project against the domain editor is running on. When verified, it will use the custom storage you have set up in your project.
Turns out. I need to add registerCallback in ngOnInit.
this.emailEditor.editor.registerCallback('image', (file, done) => { // Call Upload Image API });
I am not registered with Unlayer, I just installed the editor via npm to use in my project. For me, the basic installation fully complies, except for not being able to upload images using Farebase Storage.
I don't want to register on the Unlayer website for this. Only with the NPM package is it possible to configure the upload of images to Firebase Storage?
Hi! @noveltieng is almost right, instead add registerCallback in ngOnInit, put it on editor loaded method ;)
I hope that code can help you!
` editorLoaded(): void { // load the design json here // this.emailEditor.editor.loadDesign({});
// this.emailEditor.editor.registerCallback("image", (file, done) => {
// console.log("image");
// done({
// url: "http://portalmelhoresamigos.com.br/wp-content/uploads/2017/06/ferrett-buraco_DOMINIO-PUBLICO.jpg"
// });
// });
// this.emailEditor.editor.registerCallback('selectImage', function (data, done) {
// console.log("selectImage");
// // Open your image library
// // Once a user picks an image, call the done function with URL
// done({ url: "IMAGE URL GOES HERE" });
// });
//not working, i do not know why, use design:updated instead
this.emailEditor.editor.registerCallback("image:removed", function (image, done) {
console.log("image:removed");
// image will include id, userId and projectId
console.log(image);
// call this when image has been deleted
done();
});
this.emailEditor.editor.registerCallback("design:updated", function (data) {
if (data.item.type == "image") {
switch (data.type) {
case "content:removed":
case "content:modified":
//the default value is "https://cdn.tools.unlayer.com/image/placeholder.png"
console.log("here is the old url");
console.log(data.item.values.src.url);
break;
default:
break;
}
}
else if (data.changes?.name == "backgroundImage") {
//the default value is ""
console.log("here is the old backgrounds's url");
console.log(data.item.values.backgroundImage.url);
}
});
}
`
Here is what Worked For Me:
<email-editor (loaded)="editorLoaded($event)" (ready)="editorReady($event)"></email-editor>
` // called when the editor is created editorLoaded(event) { console.log('editorLoaded'); // load the design json here // this.emailEditor.editor.loadDesign({}); }
// called when the editor has finished loading editorReady(event) { console.log('editorReady'); this.emailEditor.editor.registerCallback('image', function (file, done) { console.log('image', file);` }) }
