search

unlayer / angular-email-editor

Drag-n-Drop Email Editor Component for Angular
https://unlayer.com
MIT License
203 stars 166 forks source link

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

Open petertoth-dev opened 9 months ago

petertoth-dev commented 9 months ago

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>
HealMah commented 1 week ago

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>

It's NO ABANDONED