Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unlayer/angular-email-editor
Drag-n-Drop Email Editor Component for Angular
https://github.com/unlayer/angular-email-editor
angular angular-components builder drag-and-drop email-marketing email-template html-emails template
Last synced: about 3 hours ago
JSON representation
Drag-n-Drop Email Editor Component for Angular
- Host: GitHub
- URL: https://github.com/unlayer/angular-email-editor
- Owner: unlayer
- License: mit
- Created: 2018-11-03T20:13:15.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-24T20:52:27.000Z (21 days ago)
- Last Synced: 2024-10-26T07:59:28.611Z (20 days ago)
- Topics: angular, angular-components, builder, drag-and-drop, email-marketing, email-template, html-emails, template
- Language: TypeScript
- Homepage: https://unlayer.com
- Size: 1.56 MB
- Stars: 202
- Watchers: 23
- Forks: 165
- Open Issues: 92
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Email Editor
The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Angular](https://angular.io/) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.
| Video Overview |
| :---------------------------------------------------------------------------------------------------------------------------------: |
| [](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
| _Watch video overview: https://youtu.be/MIWhX-NF3j8_ |
## Live Demo
Check out the live demo here: https://angular-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/angular-email-editor/tree/master/src))
## Installation
The easiest way to use Angular Email Editor is to install it from Npm or Yarn and include it in your own Angular build process.
```
npm install angular-email-editor --save
```
## Usage
Next, you'll need to import the Email Editor module in your app's module.
**app.module.ts**
```ts
import { EmailEditorModule } from 'angular-email-editor';
...
@NgModule({
...
imports: [ EmailEditorModule ],
...
});
```
**app.component.ts**
```ts
import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from 'angular-email-editor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'angular-email-editor';
@ViewChild(EmailEditorComponent)
private emailEditor: EmailEditorComponent;
// called when the editor is created
editorLoaded() {
console.log('editorLoaded');
// load the design json here
// this.emailEditor.editor.loadDesign({});
}
// called when the editor has finished loading
editorReady() {
console.log('editorReady');
}
exportHtml() {
this.emailEditor.editor.exportHtml((data) =>
console.log('exportHtml', data)
);
}
}
```
**app.component.html**
```html
Export
```
**Skip Lib Check**
Set `skipLibCheck: true` in `tsconfig.json`.
**tsconfig.json**
```ts
{
"compilerOptions": {
"skipLibCheck": true,
}
}
```
### Methods
| method | params | description |
| -------------- | ------------------- | ------------------------------------------------------- |
| **loadDesign** | `Object data` | Takes the design JSON and loads it in the editor |
| **saveDesign** | `Function callback` | Returns the design JSON in a callback function |
| **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |
See the [example source](https://github.com/unlayer/angular-email-editor/tree/master/src) for a reference implementation.
### Properties
- `editorId` `String` HTML div id of the container where the editor will be embedded (optional)
- `minHeight` `String` minimum height to initialize the editor with (default 500px)
- `options` `Object` options passed to the Unlayer editor instance (default {})
- `tools` `Object` configuration for the built-in and custom tools (default {})
- `appearance` `Object` configuration for appearance and theme (default {})
- `projectId` `Integer` Unlayer project ID (optional)
- `loaded` `Function` called when the editor instance is created
- `ready` `Function` called when the editor has finished loading
See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
## Custom Tools
Custom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/docs/custom-tools)
[](https://docs.unlayer.com/docs/custom-tools)
## Localization
You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)
### License
Copyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed.