diff --git a/src/views/contents/ContentEditorPage.vue b/src/views/contents/ContentEditorPage.vue
index af0bbdf..da52af7 100644
--- a/src/views/contents/ContentEditorPage.vue
+++ b/src/views/contents/ContentEditorPage.vue
@@ -18,6 +18,7 @@ const isSnackbarOpen = ref(false);
const snackbarTimeout = ref(2000);
const snackbarText = ref('');
const snackbarColor = ref('red');
+const selectedBackgroundColor = ref('#f0f0f0');
const userStore = useUserProfileStore();
@@ -81,6 +82,13 @@ const saveAsync = async () => {
${title.value}
+
${content.value}
@@ -103,6 +111,47 @@ const saveAsync = async () => {
}
};
+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 = ``;
+ editor.execCommand('mceInsertContent', false, styleTag);
+
+ dialog.close(); // Close dialog after selecting color
+ }
+ });
+ }
+ });
+}
+
@@ -130,15 +179,16 @@ const saveAsync = async () => {
:init="{
branding: false,
promotion: false,
- plugins: 'lists link emoticons image imagetools code help wordcount media autoresize',
+ 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',
+ 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
+ file_picker_callback: filePickerCallback,
+ // setup: setupTinyMCE, Possible to change background color of the html
}"
/>
POST
diff --git a/src/views/contents/PublishContentButton.vue b/src/views/contents/PublishContentButton.vue
index a277a7e..e925c1c 100644
--- a/src/views/contents/PublishContentButton.vue
+++ b/src/views/contents/PublishContentButton.vue
@@ -3,15 +3,11 @@ import {useClient} from '@/plugins/api.js';
import {ref} from 'vue';
import {v7} from 'uuid';
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
-import {useUserProfileStore} from "@/stores/userProfileStore.js";
-
-const props = defineProps({
- creator: {type: Object, required: true},
-});
+import {useBrandingStore} from "@/stores/brandingStore.js";
const emits = defineEmits(['content-posted'])
-const userProfileStore = useUserProfileStore()
+const brandingStore = useBrandingStore()
const creatorProfileStore = useCreatorProfileStore()
const isDialogActive = ref(false);
@@ -33,7 +29,7 @@ const removeUrl = (index) => {
async function publishPost() {
const formData = new FormData();
formData.append('id', v7());
- formData.append('creatorId', creatorProfileStore.value.id);
+ formData.append('creatorId', creatorProfileStore.creator.id);
formData.append('title', title.value);
formData.append('description', message.value);
files.value.forEach(file => {
@@ -75,7 +71,6 @@ const closeDialog = () => {