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

//or

yarn add @topol.io/editor

Usage

Add HTML element Editor will load to

<div id="app" style="position: absolute; width: 100%; height: 100%"></div>

In your JS or TS file import TopolPlugin, initialize the editor, as an ID provide the id you defined the HTML, in this example its app

For more options see the docs for TopolOptions configuration

import TopolPlugin from "@topol.io/editor";

const TOPOL_OPTIONS = {
  id: "#app",
  authorize: {
    apiKey: "YOUR_API_TOKEN",
    userId: "some-user-id",
  },
  callbacks: {
    onSave(json, html) {},
  },
};

TopolPlugin.init(TOPOL_OPTIONS);

Call Topol Plugin actions

To call actions to the editor import:

import { TopolPlugin } from "@topol.io/editor";

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 |

TypeScript

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

import { ITopolOptions, INotification, ISavedBlock } from "@topol.io/editor";