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

//or 

yarn add @topol.io/editor-react

Use in Component

In your React component import and add the simplest options.

For more options see the docs for TopolOptions configuration

import TopolEditor from '@topol.io/editor-react';

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-react';

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.

<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 | When editor is fully loaded | | 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|

TypeScript

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

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