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-builder

Usage

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

See Configuration Reference.

For any report please write to [email protected]