update in README.md

Author: koueya

README.md

@@ -1,5 +1,7 @@
 # Yakoue Email Editor
 
+![Yakoue Email builder](https://my-ykmail-bucket.s3.eu-west-3.amazonaws.com/icons/yakoue-vuejs1.png)
+
 ## Install
 
 ### CDN
@@ -17,7 +19,9 @@ $ yarn @yakoue/vue-email-builder
 
 ```
 
-## component
+## Usage
+
+Next, you'll need to import the Email Builder component to your app.
 
 ```vue
 <template>
@@ -30,51 +34,92 @@ $ yarn @yakoue/vue-email-builder
         <button @click="exportHtml">Export HTML</button>
       </div>
 
-      <YakoueEditor ref="emailbuilder" :config="config" @init="editorLoaded" />
+      <EmailBuilder ref="emailbuilder" :config="config" @load="editorLoaded" />
     </div>
   </div>
 </template>
 
 <script>
-import { YakoueEditor } from '../components'
-import templateData from '../data/template1.js'
+import EmailBuilder from '@yakoue/vue-email-builder'
 export default {
   name: 'Example',
   components: {
-    YakoueEditor,
+    EmailBuilder,
   },
   data() {
     return {
       config: {},
-      /* template: templateData, */
+      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>`,
     }
   },
-  mounted() {
-    this.$nextTick(() => {})
-  },
   methods: {
-    editorLoaded() {
-      // this.$refs.emailbuilder.instance.setTemplate(templateData)
-
-      this.$refs.emailbuilder.instance.addEvent('onExport', (data) => {
+    editorLoaded(instance) {
+      //
+      this.instance = instance
+      this.instance.addEvent('onExport', (data) => {
         console.log('exportHtml', data)
       })
+      this.instance.setTemplate(emailTemplate)
     },
-    saveDesign() {
-      // console.log(' template ' + JSON.stringify(templateData, null, 2))
-      this.$refs.emailbuilder.instance.addEvent('onSave', (design) => {
-        console.log('saveDesign', JSON.stringify(design, null, 2))
+    saveTemplate() {
+      this.addEvent('onSave', (template) => {
+        console.log('saveTemplate', JSON.stringify(template, null, 2))
       })
-      this.$refs.emailbuilder.instance.save()
+      this.instance.save()
     },
     exportHtml() {
-      this.$refs.emailbuilder.instance.export()
+      this.instance.export()
     },
   },
 }
 </script>
 ```
 
+## Methods
+
+| Method           | Param             | description                                             |
+| ---------------- | ----------------- | ------------------------------------------------------- |
+| **load**         | Builder Instance  | Callback function on builder load                       |
+| **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 |                                                                                                      |
+| :---------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
+| **brand**<br/>_object_              | No       | This is the Brand Object from Yakoue. You can get it from the Brand settings page.                   |
+| **locale**<br/>_string_             | No       | This is the locale you want to load the editor in. We have many translations available.              |
+| **fusionTags**<br/> _object_        | No       | This is an array of objects. You can pass the merge tags and special links to display in the editor. |
+| **token**<br/>_string_              | No       | String token for authentication. It is required to enable user saved blocks.                         |
+| **tools**<br/>_object_              | No       | These are the options for tools and custom tools.                                                    |
+| **blocks**<br/>_object_             | No       | This is an array of objects. You can pass custom blocks here.                                        |
+| **drows**<br/>_object_              | No       | This is an array of objects. You can pass custom rows (sections) here.                               |
+| **body**<br/>_object_               | No       | This objects to custom default template settings                                                     |
+| **editor** <br/>_object_            | No       | These are some editor options for different functions of the editor.                                 |
+| **fonts** <br/>_object_             | No       | You can pass custom fonts here.                                                                      |
+| **toolsDefaultValues**<br/>_object_ | No       | You can pass default tools properties here.                                                          |
+| **callbacks** <br/>_array_          | No       | Array of callbacks functions                                                                         |
+
 ### Compiles and hot-reloads for development
 
 ```
@@ -96,3 +141,5 @@ yarn lint
 ### Customize configuration
 
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+For any report please write to [email protected]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yakoue/vue-email-builder",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "main": "./dist/vue-email-builder.umd.js",
   "scripts": {
@@ -38,7 +38,11 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^21.0.0",
     "vue-eslint-parser": "7.6.0",
-    "vue-template-compiler": "2.6.12"
+    "vue-template-compiler": "2.6.12",
+    "bootstrap": "^5.0.0",
+    "bootstrap-vue": "^2.21.2",
+    "load-script": "^1.0.0",
+    "vue": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,
@@ -60,19 +64,19 @@
     "last 2 versions",
     "not dead"
   ],
-  "dependencies": {
-    "bootstrap": "^5.0.0",
-    "bootstrap-vue": "^2.21.2",
-    "load-script": "^1.0.0",
-    "vue": "^2.6.12"
-  },
-  "description": "## Project setup ``` yarn install ```",
+  "dependencies": {},
+  "description": "#Yakoue's MJML Drag & Drop email builder component for vuejs",
   "keywords": [
     "vue",
-    "email",
-    "mjml",
+    "drag-and-drop",
+    "template",
+    "builder",
     "editor",
-    "builder"
+    "email-marketing",
+    "email-template",
+    "html-email",
+    "mjml",
+    "yakoue"
   ],
   "author": "Yakoue"
 }

src/examples/SimpleExample.vue

@@ -1,7 +1,12 @@
 <template>
   <div id="demo">
     <b-container
-      style="padding-left: 20px; padding-right: 20px; over-flow: hidden"
+      style="
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-top: 10px;
+        over-flow: hidden;
+      "
     >
       <b-row>
         <b-col cols="9">
@@ -36,7 +41,7 @@
 
 <script>
 import { YakoueEditor } from '../components'
-import templateData from '../data/template1.js'
+import templateData from '../data/template2.json.js'
 import logo from '../assets/logo.png'
 export default {
   name: 'Example',
@@ -63,8 +68,9 @@ export default {
       this.instance.addEvent('onSave', (design) => {
         console.log('saveDesign', JSON.stringify(design, null, 2))
       })
+      this.instance.setTemplate(templateData)
     },
-    saveDesign() {
+    saveTemplate() {
       // console.log(' template ' + JSON.stringify(templateData, null, 2))
 
       this.instance.save()