Some fixes and additions

frontend/src/dialogues/admin/AnswerContact.vue

@@ -6,7 +6,7 @@
             <p>{{ contact.message }}</p>
         </div>
         <div class="editor-container">
-            <Editor v-model="answer" :init="tinymceInitOptions" :api-key="apiKey" />
+            <EditorContent :editor="editor" class="editor" />
         </div>
     </DialogWidget>
 
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import { ref, onBeforeUnmount } from 'vue'
-import Editor from '@tinymce/tinymce-vue'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
 import apiClient from '@/utils/axios.js'
 import DialogWidget from '@/components/DialogWidget.vue'
 
@@ -28,29 +28,15 @@ export default {
     name: 'AnswerContact',
     components: {
         DialogWidget,
-        Editor,
+        EditorContent,
     },
     data() {
         return {
-            apiKey: import.meta.env.VITE_TINYMCE_API_KEY,
             dialog: null,
             errorDialog: null,
             contact: null,
-            answer: '',
             errorMessage: '',
-            tinymceInitOptions: {
-                height: 300,
-                menubar: false,
-                plugins: [
-                    'advlist autolink lists link image charmap print preview anchor',
-                    'searchreplace visualblocks code fullscreen',
-                    'insertdatetime media table paste code help wordcount'
-                ],
-                toolbar:
-                    'undo redo cut copy paste | bold italic forecolor fontfamily fontsize | \
-            alignleft aligncenter alignright alignjustify | \
-            bullist numlist outdent indent | removeformat | help'
-            },
+            editor: null,
             buttons: [
                 { text: 'OK', action: this.sendAnswer },
                 { text: 'Cancel', action: this.closeDialog }
@@ -64,24 +50,25 @@ export default {
         open(contactData) {
             this.contact = contactData;
             this.dialog.open();
-            this.answer = '';
+            if (this.editor) this.editor.commands.setContent('');
         },
         closeDialog() {
             this.dialog.close();
-            this.answer = '';
+            if (this.editor) this.editor.commands.clearContent();
         },
         closeErrorDialog() {
             this.errorDialog.close();
         },
         async sendAnswer() {
+            const answer = this.editor ? this.editor.getHTML() : '';
             try {
                 await apiClient.post('/api/admin/contacts/answer', {
                     id: this.contact.id,
-                    answer: this.answer,
+                    answer,
                 });
                 this.dialog.close();
                 this.$emit('refresh');
-                this.answer = '';
+                if (this.editor) this.editor.commands.clearContent();
             } catch (error) {
                 const errorText = error.response?.data?.error || 'An unexpected error occurred.';
                 this.errorMessage = errorText;
@@ -92,9 +79,16 @@ export default {
     mounted() {
         this.dialog = this.$refs.dialog;
         this.errorDialog = this.$refs.errorDialog;
+
+        this.editor = new Editor({
+            extensions: [StarterKit],
+            content: '',
+        });
     },
     beforeUnmount() {
-        // Aufräumarbeiten falls nötig
+        if (this.editor) {
+            this.editor.destroy();
+        }
     }
 }
 </script>
@@ -106,5 +100,13 @@ export default {
 
 .editor-container {
     margin-top: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    min-height: 200px;
+}
+
+.editor {
+    min-height: 150px;
+    outline: none;
 }
 </style>