unlayer/angular-email-editor

This project is abandoned, but you can use unlayer natively in Angular

petertoth-dev opened this issue · 0 comments

petertoth-dev commented

I just copy-paste here the basic ChatGPT answer. I tested and worked. Of course you need to implement the events etc, but from this point it's easy.

Unlayer docs: https://docs.unlayer.com/docs/getting-started

Angular Component

Add Unlayer Script to Your Angular Project:
Add the Unlayer script to your index.html file within the src directory of your Angular project.

<!-- index.html -->
<html>
  <head>
    <!-- Other meta tags, stylesheets, etc. -->
    <script src="//editor.unlayer.com/embed.js"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Initialize Unlayer in Your Angular Component:
In your Angular component where you want to use Unlayer, initialize it as described in the documentation.

// your-component.component.ts
import { Component } from '@angular/core';

declare var unlayer: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor() {
    // Initialize Unlayer
    unlayer.init({
      id: 'editor-container',
      projectId: 1234, // Your project ID
      displayMode: 'email'
    });
  }
}

Create the Container Element:
In your component's HTML template, create a container element with the specified ID where Unlayer will be rendered.

<!-- your-component.component.html -->
<div id="editor-container"></div>

Use Your Component:
Use your Angular component (app-your-component) in your application where you want to display the Unlayer editor.

<!-- Some other component's template -->
<app-your-component></app-your-component>