File tree Expand file tree Collapse file tree 1 file changed +83
-0
lines changed Expand file tree Collapse file tree 1 file changed +83
-0
lines changed Original file line number Diff line number Diff line change @@ -99,6 +99,89 @@ See the [example source](https://github.com/unlayer/vue-email-editor/tree/master
9999
100100See 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
104187Custom 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 )
You can’t perform that action at this time.
0 commit comments