@topol.io/editor-vue v0.2.0
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();
For more TopolPlugin functions refer to the TopolPlugin actions
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>
4 months ago
6 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago