Skip to content

Commit dabf36b

Browse files
koueyakoueya
committed
update in README.md
1 parent ceab816 commit dabf36b

4 files changed

Lines changed: 91 additions & 34 deletions

File tree

‎README.md‎

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Yakoue Email Editor
22

3+
![Yakoue Email builder](https://my-ykmail-bucket.s3.eu-west-3.amazonaws.com/icons/yakoue-vuejs1.png)
4+
35
## Install
46

57
### CDN
@@ -17,7 +19,9 @@ $ yarn @yakoue/vue-email-builder
1719
1820
```
1921

20-
## component
22+
## Usage
23+
24+
Next, you'll need to import the Email Builder component to your app.
2125

2226
```vue
2327
<template>
@@ -30,51 +34,92 @@ $ yarn @yakoue/vue-email-builder
3034
<button @click="exportHtml">Export HTML</button>
3135
</div>
3236
33-
<YakoueEditor ref="emailbuilder" :config="config" @init="editorLoaded" />
37+
<EmailBuilder ref="emailbuilder" :config="config" @load="editorLoaded" />
3438
</div>
3539
</div>
3640
</template>
3741
3842
<script>
39-
import { YakoueEditor } from '../components'
40-
import templateData from '../data/template1.js'
43+
import EmailBuilder from '@yakoue/vue-email-builder'
4144
export default {
4245
name: 'Example',
4346
components: {
44-
YakoueEditor,
47+
EmailBuilder,
4548
},
4649
data() {
4750
return {
4851
config: {},
49-
/* template: templateData, */
52+
emailTemplate: `<mjml>
53+
<mj-body>
54+
<mj-section>
55+
<mj-column>
56+
<mj-text>
57+
<h1> Hey Title! </h1>
58+
</mj-text>
59+
<mj-button> Hi nestor! </mj-button>
60+
</mj-column>
61+
</mj-section>
62+
</mj-body>
63+
</mjml>`,
5064
}
5165
},
52-
mounted() {
53-
this.$nextTick(() => {})
54-
},
5566
methods: {
56-
editorLoaded() {
57-
// this.$refs.emailbuilder.instance.setTemplate(templateData)
58-
59-
this.$refs.emailbuilder.instance.addEvent('onExport', (data) => {
67+
editorLoaded(instance) {
68+
//
69+
this.instance = instance
70+
this.instance.addEvent('onExport', (data) => {
6071
console.log('exportHtml', data)
6172
})
73+
this.instance.setTemplate(emailTemplate)
6274
},
63-
saveDesign() {
64-
// console.log(' template ' + JSON.stringify(templateData, null, 2))
65-
this.$refs.emailbuilder.instance.addEvent('onSave', (design) => {
66-
console.log('saveDesign', JSON.stringify(design, null, 2))
75+
saveTemplate() {
76+
this.addEvent('onSave', (template) => {
77+
console.log('saveTemplate', JSON.stringify(template, null, 2))
6778
})
68-
this.$refs.emailbuilder.instance.save()
79+
this.instance.save()
6980
},
7081
exportHtml() {
71-
this.$refs.emailbuilder.instance.export()
82+
this.instance.export()
7283
},
7384
},
7485
}
7586
</script>
7687
```
7788

89+
## Methods
90+
91+
| Method | Param | description |
92+
| ---------------- | ----------------- | ------------------------------------------------------- |
93+
| **load** | Builder Instance | Callback function on builder load |
94+
| **setTemplate** | template | Take the template and load it to the builder |
95+
| **saveTemplate** | Function callback | Returns the design JSON and HTML in a callback function |
96+
| **exportHtml** | Function callback | Returns the design HTML in a callback function |
97+
98+
## Properties
99+
100+
**template** _object_ or _string_ You can set MJML Json on MJML XML as string to this props
101+
**config** _object_ You can use this props to config and customize the builder
102+
**onLoad** _function callback_ You can use this to set call back function on builder load
103+
104+
### Configuration Options
105+
106+
---
107+
108+
| Attribute | Required | |
109+
| :---------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
110+
| **brand**<br/>_object_ | No | This is the Brand Object from Yakoue. You can get it from the Brand settings page. |
111+
| **locale**<br/>_string_ | No | This is the locale you want to load the editor in. We have many translations available. |
112+
| **fusionTags**<br/> _object_ | No | This is an array of objects. You can pass the merge tags and special links to display in the editor. |
113+
| **token**<br/>_string_ | No | String token for authentication. It is required to enable user saved blocks. |
114+
| **tools**<br/>_object_ | No | These are the options for tools and custom tools. |
115+
| **blocks**<br/>_object_ | No | This is an array of objects. You can pass custom blocks here. |
116+
| **drows**<br/>_object_ | No | This is an array of objects. You can pass custom rows (sections) here. |
117+
| **body**<br/>_object_ | No | This objects to custom default template settings |
118+
| **editor** <br/>_object_ | No | These are some editor options for different functions of the editor. |
119+
| **fonts** <br/>_object_ | No | You can pass custom fonts here. |
120+
| **toolsDefaultValues**<br/>_object_ | No | You can pass default tools properties here. |
121+
| **callbacks** <br/>_array_ | No | Array of callbacks functions |
122+
78123
### Compiles and hot-reloads for development
79124

80125
```
@@ -96,3 +141,5 @@ yarn lint
96141
### Customize configuration
97142

98143
See [Configuration Reference](https://cli.vuejs.org/config/).
144+
145+
For any report please write to contact@yakoue.com

‎package.json‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@yakoue/vue-email-builder",
3-
"version": "0.0.1",
3+
"version": "0.0.3",
44
"private": false,
55
"main": "./dist/vue-email-builder.umd.js",
66
"scripts": {
@@ -38,7 +38,11 @@
3838
"stylelint-config-prettier": "^8.0.2",
3939
"stylelint-config-standard": "^21.0.0",
4040
"vue-eslint-parser": "7.6.0",
41-
"vue-template-compiler": "2.6.12"
41+
"vue-template-compiler": "2.6.12",
42+
"bootstrap": "^5.0.0",
43+
"bootstrap-vue": "^2.21.2",
44+
"load-script": "^1.0.0",
45+
"vue": "^2.6.12"
4246
},
4347
"eslintConfig": {
4448
"root": true,
@@ -60,19 +64,19 @@
6064
"last 2 versions",
6165
"not dead"
6266
],
63-
"dependencies": {
64-
"bootstrap": "^5.0.0",
65-
"bootstrap-vue": "^2.21.2",
66-
"load-script": "^1.0.0",
67-
"vue": "^2.6.12"
68-
},
69-
"description": "## Project setup ``` yarn install ```",
67+
"dependencies": {},
68+
"description": "#Yakoue's MJML Drag & Drop email builder component for vuejs",
7069
"keywords": [
7170
"vue",
72-
"email",
73-
"mjml",
71+
"drag-and-drop",
72+
"template",
73+
"builder",
7474
"editor",
75-
"builder"
75+
"email-marketing",
76+
"email-template",
77+
"html-email",
78+
"mjml",
79+
"yakoue"
7680
],
7781
"author": "Yakoue"
7882
}

‎src/examples/SimpleExample.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
22
<div id="demo">
33
<b-container
4-
style="padding-left: 20px; padding-right: 20px; over-flow: hidden"
4+
style="
5+
padding-left: 20px;
6+
padding-right: 20px;
7+
padding-top: 10px;
8+
over-flow: hidden;
9+
"
510
>
611
<b-row>
712
<b-col cols="9">
@@ -36,7 +41,7 @@
3641

3742
<script>
3843
import { YakoueEditor } from '../components'
39-
import templateData from '../data/template1.js'
44+
import templateData from '../data/template2.json.js'
4045
import logo from '../assets/logo.png'
4146
export default {
4247
name: 'Example',
@@ -63,8 +68,9 @@ export default {
6368
this.instance.addEvent('onSave', (design) => {
6469
console.log('saveDesign', JSON.stringify(design, null, 2))
6570
})
71+
this.instance.setTemplate(templateData)
6672
},
67-
saveDesign() {
73+
saveTemplate() {
6874
// console.log(' template ' + JSON.stringify(templateData, null, 2))
6975
7076
this.instance.save()

‎yakoue-vuejs1.png‎

519 KB
Loading

0 commit comments

Comments
 (0)