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-vue

//or

yarn add @topol.io/editor-vue

Use in Component

In your Vue component import and add the simplest options.

For more options see the docs for TopolOptions configuration

import { TopolEditor } from '@topol.io/editor-vue';

const customOptions = {
  authorize: {
    apiKey: 'YOUR_API_TOKEN',
    userId: 'some-user-id',
  },
};

<TopolEditor :options="customOptions"></TopolEditor>

Call Topol Plugin actions

To call actions to the editor import:

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

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 more info | | 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 | | TopolPlugin.chooseFile() | Chooses the file if image block is active more info | | TopolPlugin.openPremadeTemplatesSelection() | Opens the premade templates modal pick more info | | TopolPlugin.refreshComments(key: string) | Refreshes the conversation more info | | TopolPlugin.setActiveMembers(activeMemers: string[]) | Sets the active members | | TopolPlugin.setTemplateName(name: string) | Sets the name of template more info | | TopolPlugin.updateApiAuthorizationHeader(newHeader: string \| Record<string, string>) | Refreshes the authorization tokens more info | | TopolPlugin.updateCustomBlockContent(content: string) | Refreshes the authorization tokens more info |

Editor Events

The callbacks from editor are received as component events.

<TopolEditor
  :options="customOptions"
  @onSave="handleOnSave"
></TopolEditor>

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.

<script setup lang="ts">
import {
  ITopolOptions,
  INotification,
  ISavedBlock,
} from '@topol.io/editor-vue';
</script>