0.0.6 • Published 3 years ago
@yakoue/vue-email-builder v0.0.6
Yakoue Email Editor
Install
CDN
<script src="https://unpkg.com/@yakoue/vue-email-builder"></script>NPM
$ npm install @yakoue/vue-email-builder --save
or
$ yarn @yakoue/vue-email-builderUsage
Next, you'll need to import the Email Builder component to your app.
<template>
<div id="example">
<div class="container">
<div id="bar">
<h1>Vue Email Editor (Demo)</h1>
<button @click="saveDesign">Save Design</button>
<button @click="exportHtml">Export HTML</button>
</div>
<EmailBuilder ref="emailbuilder" :config="config" @load="editorLoaded" />
</div>
</div>
</template>
<script>
import EmailBuilder from '@yakoue/vue-email-builder'
export default {
name: 'Example',
components: {
EmailBuilder,
},
data() {
return {
config: {},
emailTemplate: `<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>
<h1> Hey Title! </h1>
</mj-text>
<mj-button> Hi nestor! </mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>`,
}
},
methods: {
editorLoaded(instance) {
//
this.instance = instance
this.instance.addEvent('onExport', (data) => {
console.log('exportHtml', data)
})
this.instance.setTemplate(emailTemplate)
},
saveTemplate() {
this.addEvent('onSave', (template) => {
console.log('saveTemplate', JSON.stringify(template, null, 2))
})
this.instance.save()
},
exportHtml() {
this.instance.export()
},
},
}
</script>Methods
| Method | Param | description |
|---|---|---|
| setTemplate | template | Take the template and load it to the builder |
| saveTemplate | Function callback | Returns the design JSON and HTML in a callback function |
| exportHtml | Function callback | Returns the design HTML in a callback function |
Properties
template object or string You can set MJML Json on MJML XML as string to this props
config object You can use this props to config and customize the builder
onLoad function callback You can use this to set call back function on builder load
Configuration Options
| Attribute | Required | |
|---|---|---|
| brandobject | No | This is the Brand Object from Yakoue. You can get it from the Brand settings page. |
| localestring | No | This is the locale you want to load the editor in. We have many translations available. |
| fusionTags object | No | This is an array of objects. You can pass the merge tags and special links to display in the editor. |
| tokenstring | No | String token for authentication. It is required to enable user saved blocks. |
| toolsobject | No | These are the options for tools and custom tools. |
| blocksobject | No | This is an array of objects. You can pass custom blocks here. |
| drowsobject | No | This is an array of objects. You can pass custom rows (sections) here. |
| bodyobject | No | This objects to custom default template settings |
| editor object | No | These are some editor options for different functions of the editor. |
| fonts object | No | You can pass custom fonts here. |
| toolsDefaultValuesobject | No | You can pass default tools properties here. |
| callbacks array | No | Array of callbacks functions |
Customize configuration
For any report please write to contact@yakoue.com