@topol.io/editor-angular

---

Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates.

Documentation

Installation

Install Editor from NPM using:

npm install @topol.io/editor-angular

//or

yarn add @topol.io/editor-angular

Use in Component

In your Angular component import and add the simplest options.

For more options see the docs for TopolOptions configuration

import { Component } from '@angular/core';
import { TopolEditor } from '@topol.io/editor-angular';

@Component({
  imports: [TopolEditor],
  template: ` <topol-editor [options]="options"> </topol-editor> `,
})
export class Example {
  options = {
    authorize: {
      apiKey: 'YOUR_API_TOKEN',
      userId: 'some-user-id',
    },
    callbacks: {},
  };
}

Call Topol Plugin actions

To call actions to the editor import:

import { TopolPlugin } from '@topol.io/editor-angular';

TopolPlugin.save();

For more TopolPlugin functions refer to the TopolPlugin actions

Editor Events

The callbacks from editor are received as component events.

@Component({
    template: `
      <topol-editor [options]="options" (onInit) = onInit() (onSave) = onSave($event) >
      </topol-editor>
  `,
})

List of all editor events

Event	Description
@onSave	Returns object which contains html and json of the template more info
@onSaveAndClose	Returns object which contains html and json of the template more info
@onTestSend	Returns object which contains email, html and json of the template more info
@onOpenFileManager	When user clicks file manager open more info
@onLoaded	After editor template is loaded using TopolPlugin.load() more info
@onInit	When editor inits more info
@onBlockSave	When user saves block in editor, returns object of type ISavedBlock more info
@onBlockRemove	When user removes saved block, returns id of saved block to be removed more info
@onBlockEdit	When user edits saved block, returns id of saved block to be updated more info
@onUndoChange	When user clicks undo button, retunrs number of steps user undone more info
@onRedoChange	When user clicks redo button, retunrs number of steps user redone more info
@onPreview	When user switches to preview more info
@onAlert	When alert appears in editor more info
@onClose	When close is click inside WindowBar more info
@onEdittedWithoutSaveChanged	When user is about to leave an editor with unsaved changes more info
@onOpenCustomBlockDialog	When user clicks on the open dialog in custom block more info
@onTemplateRename	When user clicks on the pencil icon next to the template name more info
@updateTestingEmailAddresses	When user edits the email list in preview more info
@onError	When an error that cannot be handled happened in the editor more info

TypeScript

Topol Editor provides full TypeScript integration and exports all necessary types.

import {
  ITopolOptions,
  INotification,
  ISavedBlock,
} from '@topol.io/editor-angular';