193 lines
5.5 KiB
Vue
193 lines
5.5 KiB
Vue
<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 selectedBackgroundColor = ref('#f0f0f0');
|
|
|
|
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)
|
|
}
|
|
};
|
|
|
|
const setupTinyMCE = (editor) => {
|
|
// Custom button for selecting background color
|
|
editor.ui.registry.addButton('myCustomBgColorButton', {
|
|
text: 'Page BG Color',
|
|
onAction: function () {
|
|
editor.windowManager.open({
|
|
title: 'Select Page Background Color',
|
|
body: {
|
|
type: 'panel',
|
|
items: [
|
|
{
|
|
type: 'colorpicker',
|
|
name: 'colorpicker',
|
|
label: 'Background Color'
|
|
}
|
|
]
|
|
},
|
|
buttons: [
|
|
{
|
|
text: 'Save',
|
|
type: 'submit',
|
|
primary: true
|
|
}
|
|
],
|
|
onSubmit: function (dialog) {
|
|
console.log('supppp');
|
|
const color = dialog.getData().colorpicker;
|
|
console.log(color);
|
|
selectedBackgroundColor.value = color;
|
|
|
|
// Insert style into TinyMCE's content
|
|
const styleTag = `<style>body { background-color: ${color}; }</style>`;
|
|
editor.execCommand('mceInsertContent', false, styleTag);
|
|
|
|
dialog.close(); // Close dialog after selecting color
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
</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 textcolor colorpicker',
|
|
block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3',
|
|
toolbar: 'undo redo image align myCustomBgColorButton',
|
|
automatic_uploads: true,
|
|
file_picker_types: 'image',
|
|
min_height: 600,
|
|
max_height: 1200,
|
|
images_upload_handler: imagesUploadHandler,
|
|
file_picker_callback: filePickerCallback,
|
|
// setup: setupTinyMCE, Possible to change background color of the html
|
|
}"
|
|
/>
|
|
<v-btn @click="saveAsync()">POST</v-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |