Merge pull request #43 from unlayer/feat/editor-id

adeelraza · web-flow · commit 89a6485f8f2f · 2021-06-09T19:29:44.000-07:00
Ability to pass a custom editorId
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
 # Vue Email Editor
 
-The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Vue](https://vuejs.org/) *wrapper component*. This is the most powerful and developer friendly visual email builder for your app.
+The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Vue](https://vuejs.org/) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.
 
-Video Overview |
-:---: |
-[![Vue Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
-*Watch video overview: https://youtu.be/MIWhX-NF3j8* |
+|                                                         Video Overview                                                          |
+| :-----------------------------------------------------------------------------------------------------------------------------: |
+| [![Vue Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
+|                                      _Watch video overview: https://youtu.be/MIWhX-NF3j8_                                       |
 
 ## Live Demo
 
@@ -48,60 +48,59 @@ Next, you'll need to import the Email Editor component to your app.
 </template>
 
 <script>
-  import { EmailEditor } from 'vue-email-editor'
-  
+  import { EmailEditor } from 'vue-email-editor';
+
   export default {
     name: 'app',
     components: {
-      EmailEditor
+      EmailEditor,
     },
     methods: {
       editorLoaded() {
         // Pass the template JSON here
         // this.$refs.emailEditor.editor.loadDesign({});
       },
       saveDesign() {
-        this.$refs.emailEditor.editor.saveDesign(
-          (design) => {
-            console.log('saveDesign', design);
-          }
-        )
+        this.$refs.emailEditor.editor.saveDesign((design) => {
+          console.log('saveDesign', design);
+        });
       },
       exportHtml() {
-        this.$refs.emailEditor.editor.exportHtml(
-          (data) => {
-            console.log('exportHtml', data);
-          }
-        )
-      }
-    }
-  }
+        this.$refs.emailEditor.editor.exportHtml((data) => {
+          console.log('exportHtml', data);
+        });
+      },
+    },
+  };
 </script>
 ```
 
 ### Methods
-| method          | params                   | description                                                    |
-| --------------- | ------------------------ | -------------------------------------------------------------- |
-| **loadDesign**  | `Object data`            | Takes the design JSON and loads it in the editor               |
-| **saveDesign**  | `Function callback`      | Returns the design JSON in a callback function                 |
-| **exportHtml**  | `Function callback`      | Returns the design HTML and JSON in a callback function        |
+
+| method         | params              | description                                             |
+| -------------- | ------------------- | ------------------------------------------------------- |
+| **loadDesign** | `Object data`       | Takes the design JSON and loads it in the editor        |
+| **saveDesign** | `Function callback` | Returns the design JSON in a callback function          |
+| **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |
 
 See the [example source](https://github.com/unlayer/vue-email-editor/tree/master/src) for a reference implementation.
 
 ### Properties
 
-* `minHeight` `String` minimum height to initialize the editor with (default 500px)
-* `options` `Object` options passed to the Unlayer editor instance (default {})
-* `tools` `Object` configuration for the built-in and custom tools (default {})
-* `appearance` `Object` configuration for appearance and theme (default {})
-* `projectId` `Integer` Unlayer project ID (optional)
-* `locale` `String` translations string (default en-US)
+- `editorId` `String` HTML div id of the container where the editor will be embedded (optional)
+- `minHeight` `String` minimum height to initialize the editor with (default 500px)
+- `options` `Object` options passed to the Unlayer editor instance (default {})
+- `tools` `Object` configuration for the built-in and custom tools (default {})
+- `appearance` `Object` configuration for appearance and theme (default {})
+- `projectId` `Integer` Unlayer project ID (optional)
+- `locale` `String` translations string (default en-US)
 
 See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
 
 Here's an example using the above properties...
 
-**App.vue** 
+**App.vue**
+
 ```html
 <template>
   <div id="app">
@@ -123,62 +122,57 @@ Here's an example using the above properties...
         ref="emailEditor"
         v-on:load="editorLoaded"
       />
-
     </div>
   </div>
 </template>
 
 <script>
-  import { EmailEditor } from 'vue-email-editor'
-  
+  import { EmailEditor } from 'vue-email-editor';
+
   export default {
     name: 'app',
     components: {
-      EmailEditor
+      EmailEditor,
     },
-    data() {    
-      return {  
-        minHeight: "1000px",
-        locale: "en",
+    data() {
+      return {
+        minHeight: '1000px',
+        locale: 'en',
         projectId: 0, // replace with your project id
         tools: {
           // disable image tool
           image: {
-            enabled: false
-          }
+            enabled: false,
+          },
         },
         options: {},
         appearance: {
           theme: 'dark',
           panels: {
             tools: {
-              dock: 'right'
-            }
-          }
-        } 
-      }
+              dock: 'right',
+            },
+          },
+        },
+      };
     },
     methods: {
       editorLoaded() {
         // Pass your template JSON here
         // this.$refs.emailEditor.editor.loadDesign({});
       },
       saveDesign() {
-        this.$refs.emailEditor.editor.saveDesign(
-          (design) => {
-            console.log('saveDesign', design);
-          }
-        )
+        this.$refs.emailEditor.editor.saveDesign((design) => {
+          console.log('saveDesign', design);
+        });
       },
       exportHtml() {
-        this.$refs.emailEditor.editor.exportHtml(
-          (data) => {
-            console.log('exportHtml', data);
-          }
-        )
-      }
-    }
-  }
+        this.$refs.emailEditor.editor.exportHtml((data) => {
+          console.log('exportHtml', data);
+        });
+      },
+    },
+  };
 </script>
 ```
 
@@ -188,7 +182,6 @@ Custom tools can help you add your own content blocks to the editor. Every appli
 
 [![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools)
 
-
 ## Localization
 
 You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)
diff --git a/src/components/EmailEditor.vue b/src/components/EmailEditor.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-bind:id="editorId" class="unlayer-editor" v-bind:style="{ minHeight: minHeight }"></div>
+  <div
+    v-bind:id="id"
+    class="unlayer-editor"
+    v-bind:style="{ minHeight: minHeight }"
+  ></div>
 </template>
 
 <script>
@@ -11,6 +15,7 @@ let lastEditorId = 0;
 export default {
   name: 'EmailEditor',
   props: {
+    editorId: String,
     options: Object,
     projectId: Number,
     tools: Object,
@@ -22,11 +27,9 @@ export default {
     },
   },
   computed: {
-    editorId() {
-      return `editor-${++lastEditorId}`;
-    }
-  },
-  created() {
+    id() {
+      return this.editorId || `editor-${++lastEditorId}`;
+    },
   },
   mounted() {
     loadScript(this.loadEditor.bind(this));
@@ -36,25 +39,25 @@ export default {
       const options = this.options || {};
 
       if (this.projectId) {
-        options.projectId = this.projectId
+        options.projectId = this.projectId;
       }
 
       if (this.tools) {
-        options.tools = this.tools
+        options.tools = this.tools;
       }
-      
+
       if (this.appearance) {
-        options.appearance = this.appearance
+        options.appearance = this.appearance;
       }
 
       if (this.locale) {
-        options.locale = this.locale
+        options.locale = this.locale;
       }
 
       /* global unlayer */
       this.editor = unlayer.createEditor({
         ...options,
-        id: this.editorId,
+        id: this.id,
         displayMode: 'email',
         source: {
           name: pkg.name,
@@ -72,14 +75,14 @@ export default {
     },
     exportHtml(callback) {
       this.editor.exportHtml(callback);
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
 .unlayer-editor {
   flex: 1;
   display: flex;
 }
-</style>
+</style>
