template editor

src/views/admin/settings/template/Template.vue

@@ -0,0 +1,87 @@
+<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>