unlayer / angular-email-editor Goto Github PK

Is it possible to disable the insert/edit image tool on the toolbar in Legacy Templates?

I am able to disable the emojis passing the below in the options:

{ features: { textEditor: { emojis: false } } }

I wonder if it is possible to do the same for the image?

How to configure custom cloud storage or s3 bucket in angular project

Please provide the support for Angular v17

is it possible to save the images on my s3 or my upload folder of the angular project itself?

I'm using a react version of 16.13.1, while rendering EmailEditor of version 1.1.1, I'm getting the above issue.
Can someone help me it.

Thanks in advance

Not working with Angular version 14, getting error
error NG6002: 'EmailEditorModule' does not appear to be an NgModule class.

I've just deploying on netlify it succeed but the preview is blank.

I tried to Put an email editor inside the NgbModal. But, it gives an editor undefined.

<button class="btn btn-primary" (click)="openDialog(openModal)">>Open Dialog</button>

<ng-template #openModal let-modal>
    <div class="modal-header bg-white">       
    </div>
    <div class="modal-body bg-white pl-0 pr-0 pt-0 pb-0">
           <email-editor #emailEditor (loaded)="editorLoaded()" (ready)="editorReady()"></email-editor>
    </div>
</ng-template>


openDialog() {
 this.modalService.open(targetModal, {
        size: 'md',
        backdrop: true
      });
}
  
public editorLoaded() {
}

public editorReady() {
     this.emailEditor?.editor?.loadDesign();
}

public exportHtml() {
      //Here it gives the error
     //core.mjs:6494 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'editor')
     //TypeError: Cannot read properties of undefined (reading 'editor')

      this.emailEditor.editor.exportHtml((data) => {
      });

 }

Does anyone know if this works with NgbModal or not?

Hi, just want to ask if there is a possibility for onChange or auto save method when adding columns/text on the builder

I am trying to integrate this with my existing angular application. I am showing this editor into the popup. At the first time, it is working fine. But if I close the popup and try to open it again then it is giving the following error.

Error: Could not find a valid element for given id or className.

Angular -> 7
Angular Material -> 7
angular-email-editor -> 0.7.0

My observations,
At the first time component is able to add id to div. But when I reopen the popup again then id is not applied to div. Due to this, I am getting the above error.

Is there any solution to this issue?

i have installed editor and when json template load
after that throw error

Currently, I can pass data to my custom tool following this guide: https://examples.unlayer.com/custom_tools/custom-tool-data
But it only work if the data is hardcode and set in ngOnInit, I could not set new data (getting from api) to it. I have tried many solution but no luck, please give me some advices.

Hi

Thanks for awesome editor. Is there any way to change uploadMaxSize value? Default it's 1e6 bytes. Is it possible to change this in free version?

The angular-wrapper does not support these options to be passed to the component

	<email-editor [appearance]="editorAppearance" [customCSS]="'https://examples.unlayer.com/examples/custom-css/custom.css'" [options]="options" [projectId]="id" (loaded)="editorLoaded($event)" (ready)="editorReady($event)"></email-editor>

gives an error: Can't bind to 'customCSS' since it isn't a known property of 'email-editor'.

Hello, install the library of a layer, initialize the component and everything works perfectly, until I add a button and click on it to edit its text and I find that the canvas turns blank and the error is reflected in the console

TypeError: Cannot read property 'getItem' of null

That same error occurs when I add a text block and try to edit the text in the block.

Please how do I preview the template on page load?

When the page loads in I want to trigger the preview so it just previews the template without the editing tools.

I will be glad if anyone can help out, thanks

Hi, how can I use angular-email-editor with Angular 14?
Is there any plan to update it?

I am trying to integrate this with my existing angular application. I am showing this editor into the popup. At the first time, it is working fine. But if I close the popup and try to open it again then it is giving the following error.

Error: Could not find a valid element for given id or className.

Angular -> 7
Angular Material -> 7
angular-email-editor -> 0.7.0

My observations,
At the first time component is able to add id to div. But when I reopen the popup again then id is not applied to div. Due to this, I am getting the above error.

Is there any solution to this issue?

Ivy is not compatible
any expected update? @adeelraza

Currently if you try to use it with v16 project, you'll get this:
Error: EmailEditorModule does not have a module def (ɵmod property)
As far as I understand it is related to the drop of ngcc in the latest version

Instructions for export html in console.log in table

I am trying to add a custom tool without success.

I have passed as a parameter in tools:
<email-editor
[options]="config"
[tools]="tools"
(loaded)="editorLoaded()"
(ready)="editorReady()"
#template
></email-editor>

I have tried to load it in the init:

this.emailEditor.editor.init({
id: 'editor-1',
displayMode: 'email',
customJS: [url_to.js],
});
It would be very helpful if you added a basic example of how to create a custom tool in the examples directory

Shall We need to provide the fixed format of json to work with these package ? As we have different different templates.

I need to display content only without editing capabilities. But I was surprised to notice that this cannot be done. I can open preview with unlayer.showPreview("desktop"). But user can leave preview mode when click on overlay.

设计模板显示正常，导出HTML之后table布局会产生额外的padding 导致文本换行或者样式乱

the forms tool does not appear when using the Angular. any solution for this?

how to load the font list in angular??

WARNING in ./node_modules/angular-email-editor/fesm5/angular-email-editor.js
14:41-57 "export 'defineInjectable' was not found in '@angular/core'
at HarmonyImportSpecifierDependency._getErrors (E:\logiciel-projects\EROOF\webapp\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:65:15)
at HarmonyImportSpecifierDependency.getWarnings (E:\logiciel-projects\EROOF\webapp\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:39:15)
at Compilation.reportDependencyErrorsAndWarnings (E:\logiciel-projects\EROOF\webapp\node_modules\webpack\lib\Compilation.js:703:24)
at Compilation.finish (E:\logiciel-projects\EROOF\webapp\node_modules\webpack\lib\Compilation.js:561:9)
at E:\logiciel-projects\EROOF\webapp\node_modules\webpack\lib\Compiler.js:506:17
at E:\logiciel-projects\EROOF\webapp\node_modules\tapable\lib\Tapable.js:289:11
at E:\logiciel-projects\EROOF\webapp\node_modules\webpack\lib\Compilation.js:507:11
at E:\logiciel-projects\EROOF\webapp\node_modules\webpack\lib\Compilation.js:477:14
at processTicksAndRejections (internal/process/task_queues.js:79:11)
@ ./node_modules/angular-email-editor/fesm5/angular-email-editor.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

is setMergeTags() available for the EmailEditor Angular component?

I'm trying to upload an AI-generated image i.e from the Magic Image under Image tool but it gets stuck on the uploading after clicking on Use Image.

Hello, is there a way to use it with Angular 11?
If not, is a release planned for that version?

I need this lib as I need to drink water at the moment

For example - how would I implement the following in Angular?

unlayer.registerTool({
name: 'my_tool',
label: 'My Tool',
icon: 'fa-smile',
supportedDisplayModes: ['web', 'email'],
options: {},
values: {},
renderer: {
Viewer: unlayer.createViewer({
render(values) {
return "

or this..:

unlayer.init({
className: 'unlayer-editor',
displayMode: 'email'
customCSS: ['https://examples.unlayer.com/examples/custom-css/custom.css'],
})

I have tried:
this.emailEditor.editor.init({
className: 'unlayer-editor',
displayMode: 'email'
customCSS: ['https://examples.unlayer.com/examples/custom-css/custom.css'],
})

But this does not work / only duplicates the editor instance

I exactly followed the documentation but can't export the html

adding editorId prevent this error, which should be optional
<email-editor #editor editorId="email-editor" (loaded)="editorLoaded()" [options]="options"></email-editor>

I need to attach a curly braces with square bracket to use dynamic data.
but when I load a design that contains curly braces ... it doesn't render in html

core.js:6456 ERROR TypeError: Cannot read property 'exportHtml' of undefined
at EmailEditorComponent.exportHtml (angular-email-editor.js:110)

exportHtml() {
this.emailEditor.editor.exportHtml((data) => console.log('exportHtml', data));
}

"@angular/animations": "~12.0.2",
"@angular/cdk": "^12.0.2",
"@angular/common": "~12.0.2",
"@angular/compiler": "~12.0.2",
"@angular/core": "~12.0.2",

ERROR in src/app/app.module.ts(5,35): error TS2307: Cannot find module 'email-editor'.

When an image that exceeds the size limit is uploaded the error message appears that has {mbSize} placeholder instead of actual limit

I want to use two email editor in same component.

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <email-editor #editor1 (loaded)="editorLoaded($event)"></email-editor>
</div>

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <email-editor #editor2 (loaded)="editorLoaded($event)"></email-editor>
</div>

@ViewChild(EmailEditorComponent)
private emailEditor: EmailEditorComponent;

If i am trying viewchildren instead of viewchild ,issue as editor is not defined is coming in console.

can someone guide or help?

Thanks in advance.

Hey guys,
What's the method in the angular implementation for passing the Project ID / ID / API Key on init?

Thanks!

When I try to call tools or options object, the editor seems not working. I tried to adjust some settings in the ngOnInit() function, it says undefined. Then I try to use that load function, minHeight and loadDesign is working but tool or options are not working.

Any Idea why?

Thanks

This editor two way binding is not working how I am binding data in update time I need to display preview once user update data

ngModel and formcontrol is not working

<email-editor ngDefaultControl [(ngModel)]="emailTemplate.templatestring"
name="templatestring" #templatestring="ngModel" [ngClass]="{'is-invalid': f.submitted && templatestring.invalid}" />

If you move the spread of the options (`...options') below the defaults then any dev can customize any of those options if they wished. Right now whatever they pass into the options object gets overwritten.

This is the link that i used for creating project
https://stackblitz.com/edit/email-editor-tyhc8k?file=src%2Fapp%2Feditor.component.ts

i need to clear something for my further process,

• How to use setLink Type in Angular
• CustomTool how to create
• is it possible to make a button on the top of an image ?
• i am not able to resize the components , is have any option ?
• width can able to change?

hope will get the response

I want to load my HTML design like JSON of the template is it possible? Or it will possible?

Does it provide AMP email support as well ?
I want it to be used as an AMP template generator.

Have next exception:
TypeError: this.callbacks[i] is not a function embed.js:1:11102
value https://editor.unlayer.com/embed.js:1
value https://editor.unlayer.com/embed.js:1
unlayer https://editor.unlayer.com/embed.js:1
invokeTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:423
runTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:195
invokeTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:498
invokeTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:1693
globalZoneAwareCallback https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:1730

Sample code: https://stackblitz.com/edit/email-editor

Steps:

1. Press 'Edit' on root page
2. Press 'Save' on 'Editor' page
3. Press 'Edit' on root page
4. Press 'Save' on 'Editor' page
   Catch exception