harheimertc/components/cms/CmsUeberUns.vue

<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>