Official React package for Topol Editor.
---
Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates.
Install Editor from NPM using:
``sh
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
`js
import TopolEditor from '@topol.io/editor-react';
const customOptions = {
authorize: {
apiKey: 'YOUR_API_TOKEN',
userId: 'some-user-id',
},
};
`
`jsx`
To call actions to the editor import:
`js
import { TopolPlugin } from '@topol.io/editor-react';
TopolPlugin.save();
`
For more TopolPlugin functions refer to the TopolPlugin actions
The callbacks from editor are received as component events.
`tsx`
onSave={handleOnSave}
>
| 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.
`tsx``
import {
ITopolOptions,
INotification,
ISavedBlock,
} from '@topol.io/editor-react';