torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix WYSIWYG toolbar positioning - make toolbar fixed below header

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-22 12:36:57 +02:00
parent 8292b00e5c
commit cc192eb3e5
9 changed files with 248 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
pages/cms/geschichte.vue
View File

@@ -12,22 +12,28 @@
</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-32 pb-16">
<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 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"

30
pages/cms/tt-regeln.vue
View File

@@ -12,22 +12,28 @@
</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-32 pb-16">
<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 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"

30
pages/cms/ueber-uns.vue
View File

@@ -12,22 +12,28 @@
</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-32 pb-16">
<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 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"