88 lines
2.6 KiB
Vue
88 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<MainTemplate>
|
||
|
|
<template #topBar>
|
||
|
|
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
|
||
|
|
<h1 class="font-bold text-xl h-8">Templates</h1>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #diffMain>
|
||
|
|
<div class="flex flex-col gap-4 grow pl-7">
|
||
|
|
<div class="flex flex-col gap-2 grow pr-7">
|
||
|
|
<EmailEditor
|
||
|
|
ref="emailEditor"
|
||
|
|
minHeight="100%"
|
||
|
|
:options="options"
|
||
|
|
@load="editorLoaded"
|
||
|
|
@ready="editorReady"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-row gap-4">
|
||
|
|
<button primary class="!w-fit" @click="saveDesign">Save Design</button>
|
||
|
|
<button primary-outline class="!w-fit" @click="loadBlank">leeren</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</MainTemplate>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineComponent } from "vue";
|
||
|
|
import { mapState, mapActions } from "pinia";
|
||
|
|
import MainTemplate from "@/templates/Main.vue";
|
||
|
|
import { EmailEditor } from "vue-email-editor";
|
||
|
|
import { options } from "@/helpers/unlayerEditor";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
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");
|
||
|
|
(this.$refs.emailEditor as typeof EmailEditor).editor.setBodyValues({
|
||
|
|
contentWidth: "100%",
|
||
|
|
backgroundColor: "#ffffff",
|
||
|
|
linkStyle: {
|
||
|
|
linkColor: "#990b00",
|
||
|
|
linkHoverColor: "#bb1e10",
|
||
|
|
linkUnderline: false,
|
||
|
|
linkHoverUnderline: false,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
loadBlank() {
|
||
|
|
(this.$refs.emailEditor as typeof EmailEditor).editor.loadBlank();
|
||
|
|
},
|
||
|
|
loadDesign() {
|
||
|
|
(this.$refs.emailEditor as typeof EmailEditor).editor.loadDesign((design: any) => {
|
||
|
|
console.log("saveDesign", design);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
saveDesign() {
|
||
|
|
(this.$refs.emailEditor as typeof EmailEditor).editor.saveDesign((design: any) => {
|
||
|
|
console.log("saveDesign", design);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
exportHtml() {
|
||
|
|
(this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
|
||
|
|
minify: true,
|
||
|
|
onlyHeader: true,
|
||
|
|
});
|
||
|
|
(this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
|
||
|
|
minify: true,
|
||
|
|
});
|
||
|
|
(this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
|
||
|
|
minify: true,
|
||
|
|
onlyFooter: true,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|