Add WYSIWYG editor for Über uns page

pages/cms/index.vue

@@ -7,6 +7,21 @@
       <div class="w-24 h-1 bg-primary-600 mb-8" />
 
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Über uns -->
+        <NuxtLink
+          to="/cms/ueber-uns"
+          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
+        >
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center group-hover:bg-indigo-600 transition-colors">
+              <Newspaper :size="24" class="text-indigo-600 group-hover:text-white" />
+            </div>
+            <h2 class="ml-4 text-xl font-semibold text-gray-900">Über uns</h2>
+          </div>
+          <p class="text-gray-600">
+            Seite „Über uns“ bearbeiten (WYSIWYG)
+          </p>
+        </NuxtLink>
         <!-- Interne News -->
         <NuxtLink
           to="/mitgliederbereich/news"

pages/cms/ueber-uns.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="min-h-full py-16 bg-gray-50">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between mb-6">
+        <h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900">Über uns bearbeiten</h1>
+        <div class="space-x-3">
+          <button @click="save" class="inline-flex items-center px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700">Speichern</button>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+        <div class="flex flex-wrap items-center gap-2 mb-3">
+          <button class="px-3 py-1 rounded border" @click="format('bold')"><strong>B</strong></button>
+          <button class="px-3 py-1 rounded border" @click="format('italic')"><em>I</em></button>
+          <button class="px-3 py-1 rounded border" @click="formatHeader(1)">H1</button>
+          <button class="px-3 py-1 rounded border" @click="formatHeader(2)">H2</button>
+          <button class="px-3 py-1 rounded border" @click="formatHeader(3)">H3</button>
+          <button class="px-3 py-1 rounded border" @click="format('insertUnorderedList')">• Liste</button>
+          <button class="px-3 py-1 rounded border" @click="format('insertOrderedList')">1. Liste</button>
+          <button class="px-3 py-1 rounded border" @click="createLink()">Link</button>
+          <button class="px-3 py-1 rounded border" @click="removeFormat()">Format entfernen</button>
+        </div>
+        <div
+          ref="editor"
+          class="min-h-[320px] p-4 outline-none prose max-w-none"
+          contenteditable
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+useHead({ title: 'CMS: Über uns' })
+
+const editor = ref(null)
+const initialHtml = ref('')
+
+async function load() {
+  const data = await $fetch('/api/config')
+  initialHtml.value = data?.seiten?.ueberUns || ''
+  if (editor.value) editor.value.innerHTML = initialHtml.value
+}
+
+async function save() {
+  const html = editor.value?.innerHTML || ''
+  const current = await $fetch('/api/config')
+  const updated = { ...current, seiten: { ...(current.seiten || {}), ueberUns: html } }
+  await $fetch('/api/config', { method: 'PUT', body: updated })
+}
+
+function format(cmd) {
+  document.execCommand(cmd, false, null)
+}
+
+function formatHeader(level) {
+  document.execCommand('formatBlock', false, 'H' + level)
+}
+
+function createLink() {
+  const url = prompt('URL eingeben:')
+  if (!url) return
+  document.execCommand('createLink', false, url)
+}
+
+function removeFormat() {
+  document.execCommand('removeFormat', false, null)
+}
+
+onMounted(load)
+</script>
+
+

pages/verein/ueber-uns.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="min-h-full py-16 bg-white">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
+        Über uns
+      </h1>
+      <div class="prose prose-lg max-w-none" v-html="content" />
+    </div>
+  </div>
+  
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const content = ref('')
+
+useHead({
+  title: 'Über uns - Harheimer TC',
+})
+
+async function loadConfig() {
+  try {
+    const data = await $fetch('/api/config')
+    content.value = data?.seiten?.ueberUns || ''
+  } catch (e) {
+    content.value = ''
+  }
+}
+
+onMounted(loadConfig)
+</script>
+
+

server/data/config.json

@@ -153,5 +153,8 @@
       "nachname": "Schulz",
       "email": "tsschulz@tsschulz.de"
     }
+  },
+  "seiten": {
+    "ueberUns": "<p>Der Harheimer Tischtennis-Club 1954 e. V. (HTC) ist ein lebendiger Verein mit langer Tradition. Hier könnte Ihr einleitender Text stehen.</p><p>Fügen Sie Inhalte im CMS hinzu, inklusive Überschriften, Listen und Links.</p>"
   }
 }