0.2.0 • Published 4 months ago

@topol.io/editor-vue v0.2.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
4 months ago

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

EventDescription
@onSaveReturns object which contains html and json of the template more info
@onSaveAndCloseReturns object which contains html and json of the template more info
@onTestSendReturns object which contains email, html and json of the template more info
@onOpenFileManagerWhen user clicks file manager open more info
@onLoadedAfter editor template is loaded using TopolPlugin.load() more info
@onInitWhen editor inits more info
@onBlockSaveWhen user saves block in editor, returns object of type ISavedBlock more info
@onBlockRemoveWhen user removes saved block, returns id of saved block to be removed more info
@onBlockEditWhen user edits saved block, returns id of saved block to be updated more info
@onUndoChangeWhen user clicks undo button, retunrs number of steps user undone more info
@onRedoChangeWhen user clicks redo button, retunrs number of steps user redone more info
@onPreviewWhen user switches to preview more info
@onAlertWhen alert appears in editor more info
@onCloseWhen close is click inside WindowBar more info
@onEdittedWithoutSaveChangedWhen user is about to leave an editor with unsaved changes more info
@onOpenCustomBlockDialogWhen user clicks on the open dialog in custom block more info
@onTemplateRenameWhen user clicks on the pencil icon next to the template name more info
@updateTestingEmailAddressesWhen user edits the email list in preview more info
@onErrorWhen 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>
0.2.0

4 months ago

0.1.0

6 months ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago

0.0.0

1 year ago

0.0.0-beta.15

2 years ago

0.0.0-beta.14

2 years ago

0.0.0-beta.17

2 years ago

0.0.0-beta.16

2 years ago

0.0.0-beta.19

2 years ago

0.0.0-beta.18

2 years ago

0.0.0-beta.20

2 years ago

0.0.0-beta.13

2 years ago

0.0.0-beta.12

2 years ago

0.0.0-beta.11

3 years ago

0.0.0-beta.10

3 years ago

0.0.0-beta.9

3 years ago

0.0.0-beta.8

3 years ago

0.0.0-beta.7

3 years ago

0.0.0-beta.6

3 years ago

0.0.0-beta.5

3 years ago

0.0.0-beta.4

3 years ago

0.0.0-beta.3

3 years ago

0.0.0-beta.2

3 years ago

0.0.0-beta.1

3 years ago

0.0.0-alfa.2

3 years ago

0.0.0-alfa.1

3 years ago