Merge pull request #53 from brunolemos/UN-549

Add on:ready method (called after editor:ready event)

Author: adeelraza

README.md

@@ -42,7 +42,11 @@ Next, you'll need to import the Email Editor component to your app.
         <button v-on:click="exportHtml">Export HTML</button>
       </div>
 
-      <EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
+      <EmailEditor
+        ref="emailEditor"
+        v-on:load="editorLoaded"
+        v-on:ready="editorReady"
+      />
     </div>
   </div>
 </template>
@@ -56,10 +60,16 @@ Next, you'll need to import the Email Editor component to your app.
       EmailEditor,
     },
     methods: {
+      // called when the editor is created
       editorLoaded() {
+        console.log('editorLoaded');
         // Pass the template JSON here
         // this.$refs.emailEditor.editor.loadDesign({});
       },
+      // called when the editor has finished loading
+      editorReady() {
+        console.log('editorReady');
+      },
       saveDesign() {
         this.$refs.emailEditor.editor.saveDesign((design) => {
           console.log('saveDesign', design);
@@ -121,6 +131,7 @@ Here's an example using the above properties...
         :options="options"
         ref="emailEditor"
         v-on:load="editorLoaded"
+        v-on:ready="editorReady"
       />
     </div>
   </div>
@@ -157,10 +168,16 @@ Here's an example using the above properties...
       };
     },
     methods: {
+      // called when the editor is created
       editorLoaded() {
+        console.log('editorLoaded');
         // Pass your template JSON here
         // this.$refs.emailEditor.editor.loadDesign({});
       },
+      // called when the editor has finished loading
+      editorReady() {
+        console.log('editorReady');
+      },
       saveDesign() {
         this.$refs.emailEditor.editor.saveDesign((design) => {
           console.log('saveDesign', design);

src/components/EmailEditor.vue

@@ -66,6 +66,10 @@ export default {
       });
 
       this.$emit('load');
+
+      this.editor.addEventListener('editor:ready', () => {
+        this.$emit('ready');
+      });
     },
     loadDesign(design) {
       this.editor.loadDesign(design);

src/views/DesignEdit.vue

@@ -9,7 +9,7 @@
         <button v-on:click="exportHtml">Export HTML</button>
       </div>
 
-      <EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
+      <EmailEditor ref="emailEditor" v-on:load="editorLoaded" v-on:ready="editorReady" />
     </div>
   </div>
 </template>
@@ -23,7 +23,13 @@ export default {
     EmailEditor
   },
   methods: {
+    // called when the editor is created
     editorLoaded() {
+      console.log('editorLoaded');
+    },
+    // called when the editor has finished loading
+    editorReady() {
+      console.log('editorReady');
     },
     saveDesign() {
       this.$refs.emailEditor.editor.saveDesign(

src/views/Example.vue

@@ -8,7 +8,7 @@
         <button v-on:click="exportHtml">Export HTML</button>
       </div>
 
-      <EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
+      <EmailEditor ref="emailEditor" v-on:load="editorLoaded" v-on:ready="editorReady" />
     </div>
   </div>
 </template>
@@ -23,9 +23,15 @@ export default {
     EmailEditor
   },
   methods: {
+    // called when the editor is created
     editorLoaded() {
+      console.log('editorLoaded');
       this.$refs.emailEditor.editor.loadDesign(sample);
     },
+    // called when the editor has finished loading
+    editorReady() {
+      console.log('editorReady');
+    },
     saveDesign() {
       this.$refs.emailEditor.editor.saveDesign(
         (design) => {