Skip to content

Commit a73c0fd

Browse files
authored
Added an example using available properties
1 parent 266d6de commit a73c0fd

File tree

1 file changed

+83
-0
lines changed

1 file changed

+83
-0
lines changed

README.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,89 @@ See the [example source](https://github.com/unlayer/vue-email-editor/tree/master
9999

100100
See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
101101

102+
Here's an example using the above properties...
103+
104+
**App.vue**
105+
```html
106+
<template>
107+
<div id="app">
108+
<div class="container">
109+
<div id="bar">
110+
<h1>Vue Email Editor (Demo)</h1>
111+
112+
<button v-on:click="saveDesign">Save Design</button>
113+
<button v-on:click="exportHtml">Export HTML</button>
114+
</div>
115+
116+
<EmailEditor
117+
:appearance="appearance"
118+
:min-height="minHeight"
119+
:project-id="projectId"
120+
:locale="locale"
121+
:tools="tools"
122+
:options="options"
123+
ref="emailEditor"
124+
v-on:load="editorLoaded"
125+
/>
126+
127+
</div>
128+
</div>
129+
</template>
130+
131+
<script>
132+
import { EmailEditor } from 'vue-email-editor'
133+
134+
export default {
135+
name: 'app',
136+
components: {
137+
EmailEditor
138+
},
139+
data() {
140+
return {
141+
minHeight: "1000px",
142+
locale: "en",
143+
projectId: 0, // replace with your project id
144+
tools: {
145+
// disable image tool
146+
image: {
147+
enabled: false
148+
}
149+
},
150+
options: {},
151+
appearance: {
152+
theme: 'dark',
153+
panels: {
154+
tools: {
155+
dock: 'right'
156+
}
157+
}
158+
}
159+
}
160+
},
161+
methods: {
162+
editorLoaded() {
163+
// Pass your template JSON here
164+
// this.$refs.emailEditor.editor.loadDesign({});
165+
},
166+
saveDesign() {
167+
this.$refs.emailEditor.editor.saveDesign(
168+
(design) => {
169+
console.log('saveDesign', design);
170+
}
171+
)
172+
},
173+
exportHtml() {
174+
this.$refs.emailEditor.editor.exportHtml(
175+
(data) => {
176+
console.log('exportHtml', data);
177+
}
178+
)
179+
}
180+
}
181+
}
182+
</script>
183+
```
184+
102185
## Custom Tools
103186

104187
Custom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/docs/custom-tools)

0 commit comments

Comments
 (0)