Add WYSIWYG editors for Geschichte and TT-Regeln pages
This commit is contained in:
Torsten Schulz (local)
77
pages/cms/geschichte.vue
Normal file
77
pages/cms/geschichte.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<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">Geschichte 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: Geschichte' })
|
||||
|
||||
const editor = ref(null)
|
||||
const initialHtml = ref('')
|
||||
|
||||
async function load() {
|
||||
const data = await $fetch('/api/config')
|
||||
initialHtml.value = data?.seiten?.geschichte || ''
|
||||
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 || {}), geschichte: 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>
|
||||
@@ -19,7 +19,39 @@
|
||||
<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)
|
||||
Seite „Über uns" bearbeiten (WYSIWYG)
|
||||
</p>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Geschichte -->
|
||||
<NuxtLink
|
||||
to="/cms/geschichte"
|
||||
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-amber-100 rounded-lg flex items-center justify-center group-hover:bg-amber-600 transition-colors">
|
||||
<Newspaper :size="24" class="text-amber-600 group-hover:text-white" />
|
||||
</div>
|
||||
<h2 class="ml-4 text-xl font-semibold text-gray-900">Geschichte</h2>
|
||||
</div>
|
||||
<p class="text-gray-600">
|
||||
Vereinsgeschichte bearbeiten (WYSIWYG)
|
||||
</p>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- TT-Regeln -->
|
||||
<NuxtLink
|
||||
to="/cms/tt-regeln"
|
||||
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-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-600 transition-colors">
|
||||
<Newspaper :size="24" class="text-red-600 group-hover:text-white" />
|
||||
</div>
|
||||
<h2 class="ml-4 text-xl font-semibold text-gray-900">TT-Regeln</h2>
|
||||
</div>
|
||||
<p class="text-gray-600">
|
||||
Tischtennis-Regeln bearbeiten (WYSIWYG)
|
||||
</p>
|
||||
</NuxtLink>
|
||||
<!-- Interne News -->
|
||||
|
||||
77
pages/cms/tt-regeln.vue
Normal file
77
pages/cms/tt-regeln.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<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">TT-Regeln 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: TT-Regeln' })
|
||||
|
||||
const editor = ref(null)
|
||||
const initialHtml = ref('')
|
||||
|
||||
async function load() {
|
||||
const data = await $fetch('/api/config')
|
||||
initialHtml.value = data?.seiten?.ttRegeln || ''
|
||||
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 || {}), ttRegeln: 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>
|
||||
31
pages/verein/geschichte.vue
Normal file
31
pages/verein/geschichte.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<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">
|
||||
Geschichte
|
||||
</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: 'Geschichte - Harheimer TC',
|
||||
})
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const data = await $fetch('/api/config')
|
||||
content.value = data?.seiten?.geschichte || ''
|
||||
} catch (e) {
|
||||
content.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadConfig)
|
||||
</script>
|
||||
31
pages/verein/tt-regeln.vue
Normal file
31
pages/verein/tt-regeln.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<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">
|
||||
TT-Regeln
|
||||
</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: 'TT-Regeln - Harheimer TC',
|
||||
})
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const data = await $fetch('/api/config')
|
||||
content.value = data?.seiten?.ttRegeln || ''
|
||||
} catch (e) {
|
||||
content.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadConfig)
|
||||
</script>
|
||||
@@ -155,6 +155,8 @@
|
||||
}
|
||||
},
|
||||
"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>"
|
||||
"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>",
|
||||
"geschichte": "<h2>Unsere Vereinsgeschichte</h2><p>Der Harheimer Tischtennis-Club wurde 1954 gegründet und blickt auf eine lange Tradition zurück.</p><h3>Die Anfänge</h3><p>Hier können Sie die Geschichte Ihres Vereins detailliert beschreiben...</p>",
|
||||
"ttRegeln": "<h2>Tischtennis-Regeln</h2><h3>Spielregeln</h3><ul><li>Ein Spiel geht über 3 oder 5 Gewinnsätze</li><li>Jeder Satz wird bis 11 Punkte gespielt</li><li>Bei 10:10 wird bis zum Vorsprung von 2 Punkten gespielt</li></ul><h3>Vereinsregeln</h3><p>Hier können Sie spezielle Vereinsregeln und Verhaltensrichtlinien festhalten...</p>"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user