TinyMce for posts

2024-10-12 17:12:57 -04:00
parent e02699b541
commit 006db49cf7
132 changed files with 10929 additions and 7 deletions
--- a/src/views/contents/ContentEditorPage.vue
+++ b/src/views/contents/ContentEditorPage.vue
@@ -0,0 +1,150 @@
+<script setup>
+import {ref} from 'vue';
+import Editor from '@tinymce/tinymce-vue';
+import '@tinymce/tinymce-vue';
+import {useClient} from "@/plugins/api.js";
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import {v7} from "uuid";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+const client = useClient();
+
+const tinymceScriptSrc = '/tinymce/js/tinymce/tinymce.min.js';
+const content = ref('');
+const title = ref('');
+let lastUploadedFileName = '';
+const isSnackbarOpen = ref(false);
+const snackbarTimeout = ref(2000);
+const snackbarText = ref('');
+const snackbarColor = ref('red');
+
+const userStore = useUserProfileStore();
+
+// Custom image upload handler
+const imagesUploadHandler = async (blobInfo) => {
+  const formData = new FormData();
+  formData.append('id', v7());
+  formData.append('files', blobInfo.blob(), lastUploadedFileName);
+  formData.append('creatorId', userStore.user.id);
+  
+  let response = await client.post("/api/content/insert-image", formData);
+  let imageUrl = response.data[0];
+  
+  /* global tinymce */
+  const editor = tinymce.activeEditor;
+  const images = editor.dom.select('img');
+  const lastImage = images.find(x => x.alt = lastUploadedFileName);
+
+  if (lastImage) {
+    // Replace the source of the image
+    editor.dom.setAttrib(lastImage, 'src', imageUrl);
+    editor.dom.setAttrib(lastImage, 'alt', lastUploadedFileName);
+
+    // Adds the change to the undo stack
+    editor.undoManager.add();  
+  } else {
+    console.error('No image found in the content.');
+  }
+};
+
+const filePickerCallback = (callback, value, meta) => {
+  const input = document.createElement('input');
+  input.setAttribute('type', 'file');
+  input.setAttribute('accept', 'image/*');
+
+  input.onchange = function () {
+    const file = input.files[0];
+    const reader = new FileReader();
+    
+    reader.onload = function () {
+      lastUploadedFileName = file.name;
+      callback(reader.result);
+    }
+    
+    reader.readAsDataURL(file);
+  };
+
+  input.click();
+};
+
+const saveAsync = async () => {
+  if (title.value === '') {
+    snackbarText.value = "Vous avez besoin d'un titre";
+    isSnackbarOpen.value = true;
+  }
+  
+  const fullHtmlContent = `
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${title.value}</title>
+  </head>
+  <body>
+    ${content.value}
+  </body>
+  </html>`;
+  
+  const formData = new FormData();
+  formData.append('id', v7());
+  formData.append('creatorId', userStore.user.id);  
+  formData.append('title', title.value);
+  formData.append('htmlContent', fullHtmlContent);
+  const response = await client.post("/api/contents/html", formData);
+  
+
+  if (response.status === 200) {
+    snackbarText.value = "Publier";
+    snackbarColor.value = "green";
+    isSnackbarOpen.value = true;
+    router.go(-1)
+  }
+};
+
+</script>
+
+<template>
+  <v-snackbar v-model="isSnackbarOpen" :timeout="snackbarTimeout">
+    {{ snackbarText }}
+
+    <template v-slot:actions>
+      <v-btn :color="snackbarColor" variant="text" @click="isSnackbarOpen = false">
+        Fermer
+      </v-btn>
+    </template>
+  </v-snackbar>
+  
+  <div class="w-full h-full flex flex-col items-center justify-start">
+    <v-btn  class="mb-4 text-xl px-6 py-3" @click="router.go(-1)">Return</v-btn>
+    <v-text-field 
+        v-model="title" 
+        placeholder="Title"
+        style="width: 40%; font-size: 1.5rem; padding: 10px;"
+    ></v-text-field>
+    <Editor
+        style="max-width: 400px; width: 50%; font-size: 1.5rem; padding: 10px; height: 120%"
+        :tinymceScriptSrc="tinymceScriptSrc"
+        v-model="content"
+        :init="{
+          branding: false,
+          promotion: false,
+          plugins: 'lists link emoticons image imagetools code help wordcount media autoresize',
+          block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3',
+          toolbar: 'undo redo image align',
+          automatic_uploads: true,
+          file_picker_types: 'image',
+          min_height: 600,
+          max_height: 1200,
+          images_upload_handler: imagesUploadHandler,
+          file_picker_callback: filePickerCallback
+      }"
+    />
+    <v-btn @click="saveAsync()">POST</v-btn>
+  </div>
+</template>
+
+<style scoped>
+
+</style>