Add old post type and possibility to change BG color

2024-10-12 18:10:26 -04:00
parent 006db49cf7
commit ee3b594594
4 changed files with 71 additions and 16 deletions
--- 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 () => {
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${title.value}</title>
+    <style>
+      body {
+        background-color: ${selectedBackgroundColor.value};
+        padding: 20px;
+        font-family: Arial, sans-serif;
+      }
+    </style>
  </head>
  <body>
    ${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 = `<style>body { background-color: ${color}; }</style>`;
+          editor.execCommand('mceInsertContent', false, styleTag);
+
+          dialog.close(); // Close dialog after selecting color
+        }
+      });
+    }
+  });
+}
+
 </script>

 <template>
@@ -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 
      }"
    />
    <v-btn @click="saveAsync()">POST</v-btn>