Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates.
Install Editor from NPM using:
npm install @topol.io/editor-react
//or
yarn add @topol.io/editor-react
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>
To call actions to the editor import:
import { TopolPlugin } from '@topol.io/editor-react';
TopolPlugin.save();
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 |
The callbacks from editor are received as component events.
<TopolEditor
options={customOptions}
onSave={handleOnSave}
></TopolEditor>
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 |
Topol Editor provides full TypeScript integration and exports all necessary types.
import {
ITopolOptions,
INotification,
ISavedBlock,
} from '@topol.io/editor-react';