Angular Email Designer

This library was generated with Angular CLI version 15.2.0.

Installation

Install via NPM:

npm install @send-with-ses/ng-email-designer

Or via YARN:

yarn add @send-with-ses/ng-email-designer

Live Demo

Check out the live demo here: https://designer.sendune.com (Source Code)

Initialization

Import the Email Editor module in your app's module.

app.module.ts

import { EmailEditorModule } from '@send-with-ses/ng-email-designer';
...

@NgModule({
  ...
  imports: [ EmailEditorModule ],
  ...
});

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from '@send-with-ses/ng-email-designer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;

  selectedTemplate: TemplateBean;
  selectedTemplateType = '';

  // To get the HTML output of the template
  exportHtml() {
    console.log(this.emailEditor.exportHtml());
    this.emailEditor.showHtmlPreview();
  }

  preview() {
    this.emailEditor.showPreview();
  }
}

app.component.html

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <lib-email-designer [type]="selectedTemplateType" [template]="selectedTemplate" #emailEditor></lib-email-designer>
</div>

Documentation

We support 3 types of Templates

1. SENDUNE Designer (ses_designer)
2. HTML Editor (html_editor)
3. Plain Text (plain_text)

Pass the relevant template type as 'selectedTemplateType' to use it.

HTML Editor

to use html editor, please include the following glob in 'assets' of your angular.json

{ "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "/assets/monaco/min" }

{
  "apps": [
    {
      "assets": [
        { "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "/assets/monaco/min" }
      ],
      ...
    }
    ...
  ],
  ...
}

And include MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts):

import { MonacoEditorModule } from 'ngx-monaco-editor-v2';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MonacoEditorModule.forRoot() // use forRoot() in main app module only.
  ],
  providers: [],
})

Image Handling

Images can be directly uploaded to a cloud storage of your choice (ex: AWS S3, Cloudflare R2, GCP Cloud Storage etc).

<lib-email-designer [type]="selectedTemplateType" [template]="selectedTemplate" #emailEditor class="px-0"
        (imageSelectionTriggered)="onImageSelectionTrigger($event)"
        (imageUploadTriggered)="onImageUploadTrigger($event)"
        (emailContentChanged)="onEmailContentChange($event)"
        ></lib-email-designer>

Please implement your image upload functionality and provide it to the library as above (imageUploadTriggered/imageSelectionTriggered).

🎨 UI Theming and Styles

You can make a few changes to make the Email Designer match your website colors.

Import the following styles into your global styles file (e.g., styles.scss):

@import '../node_modules/@send-with-ses/ng-email-designer/src/lib/theme.scss';
@import '../node_modules/@send-with-ses/ng-email-designer/src/lib/email-editor.css';

To make the Email Designer match your website's UI, include the following in your main.scss or styles.scss file and change the colors as you like.

 :root {
    --sws-icon-color: #ccc;
    --sws-icon-hover-color: #555;
    --sws-header-background: #eee;
    --sws-header-text-color: #555;
    --sws-border-color: #ccc;
 }

Known Issues

1. If you get 'Cannot find name ActiveXObject' error,

   please include 'scripthost' in lib of tsconfig.json

   "lib": [
         "es2018",
         "dom",
         "ScriptHost"
       ],

Further help

Write to designer [at] sendune [dot] com if you need any help.