@topol.io/editor-angular
v0.0.4
Published
Official Angular package for Topol Editor.
Downloads
68
Readme
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();
List of all available TopolPlugin actions:
| Action | Description |
| --- | ----------- |
| TopolPlugin.save()
| Saves the content of the editor more info |
| TopolPlugin.load(template
) | Loads the provided template more info |
| TopolPlugin.togglePreview()
| Toggles editor preview more info|
| TopolPlugin.togglePreviewSize()
| Toggles editor preview size |
| TopolPlugin.undo()
| Undo change in editor more info|
| TopolPlugin.redo()
| Redo change in editor more info|
| TopolPlugin.setSavedBlocks(savedblock: ISavedBlock[])
| Sets the saved blocks more info |
| TopolPlugin.createNotification(notification: INotification)
| Creates editor's notification more info |
| TopolPlugin.changeEmailToMobile()
| Change email to mobile view more info|
| TopolPlugin.changeEmailToDesktop()
| Change email to desktop view more info|
| TopolPlugin.toggleBlocksAndStructuresVisibility()
| Toggle hidden structures visibility for blocks and structures more info|
| TopolPlugin.destroy()
| Destroys the editor initialization more info |
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()
|
| @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 |
| @unRedoChange
| When user clicks redo button, retunrs number of steps user redone more info |
| @onPreview
| When user switches to preview |
| @onAlert
| When alert appears in editor more info|
| @onClose
| When close is click inside WindowBar more info|
TypeScript
Topol Editor provides full TypeScript integration and exports all necessary types.
import { ITopolOptions, INotification, ISavedBlock } from '@topol.io/editor-angular';