93 lines
3.3 KiB
Vue
93 lines
3.3 KiB
Vue
<template>
|
|
<div class="min-h-full bg-gray-50">
|
|
<!-- Fixed Header below navigation -->
|
|
<div class="fixed top-16 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Fixed Toolbar below header -->
|
|
<div class="fixed top-28 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('bold')"><strong>B</strong></button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('italic')"><em>I</em></button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(1)">H1</button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(2)">H2</button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="formatHeader(3)">H3</button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertUnorderedList')">• Liste</button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="format('insertOrderedList')">1. Liste</button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="createLink()">Link</button>
|
|
<button class="px-3 py-1 rounded border hover:bg-gray-50" @click="removeFormat()">Format entfernen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content with top padding -->
|
|
<div class="pt-40 pb-16">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
|
|
<div
|
|
ref="editor"
|
|
class="min-h-[320px] p-4 outline-none prose max-w-none"
|
|
contenteditable
|
|
/>
|
|
</div>
|
|
</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>
|