134 lines
3.9 KiB
Vue
Executable File
134 lines
3.9 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<!-- Header with save button -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl sm:text-2xl font-display font-bold text-gray-900">
|
|
Über uns bearbeiten
|
|
</h2>
|
|
<button
|
|
class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base"
|
|
@click="save"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="sticky top-0 z-10 bg-white border border-gray-200 rounded-t-lg shadow-sm">
|
|
<div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3">
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="format('bold')"
|
|
>
|
|
<strong>B</strong>
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="format('italic')"
|
|
>
|
|
<em>I</em>
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="formatHeader(1)"
|
|
>
|
|
H1
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="formatHeader(2)"
|
|
>
|
|
H2
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="formatHeader(3)"
|
|
>
|
|
H3
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="format('insertUnorderedList')"
|
|
>
|
|
•
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="format('insertOrderedList')"
|
|
>
|
|
1.
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="createLink()"
|
|
>
|
|
Link
|
|
</button>
|
|
<button
|
|
class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
|
|
@click="removeFormat()"
|
|
>
|
|
Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Editor -->
|
|
<div class="bg-white rounded-b-lg shadow-sm border border-t-0 border-gray-200 p-3 sm:p-4">
|
|
<div
|
|
ref="editor"
|
|
class="min-h-[320px] p-3 sm:p-4 outline-none prose max-w-none text-sm sm:text-base"
|
|
contenteditable
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const editor = ref(null)
|
|
|
|
async function load() {
|
|
const data = await $fetch('/api/config')
|
|
const html = data?.seiten?.ueberUns || ''
|
|
if (editor.value) editor.value.innerHTML = html
|
|
}
|
|
|
|
async function save() {
|
|
const html = editor.value?.innerHTML || ''
|
|
const current = await $fetch('/api/config')
|
|
const updated = { ...current, seiten: { ...(current.seiten || {}), ueberUns: html } }
|
|
try {
|
|
await $fetch('/api/config', { method: 'PUT', body: updated })
|
|
try { window.showSuccessModal && window.showSuccessModal('Erfolg', 'Inhalt erfolgreich gespeichert!') } catch {
|
|
// Modal nicht verfügbar
|
|
}
|
|
} catch (error) {
|
|
try { window.showErrorModal && window.showErrorModal('Fehler', error?.data?.message || 'Speichern fehlgeschlagen') } catch {
|
|
// Modal nicht verfügbar
|
|
}
|
|
}
|
|
}
|
|
|
|
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>
|