web-editor: TinyMCE-Editor, Verwaltung, schnelles Tree-Laden, CI-Design
- TinyMCE (selbst gehostet) mit Base64-Bildeinbettung statt contenteditable - Kategorie-Tabs Vorlagen/Fußzeilen/Signaturen + Verwaltung (Übersicht, Abteilungen, E-Mail-Zuordnung, Schlagwörter) - /api/tree über rekursive git/trees-API (1 statt ~17 Anfragen) - Plus-Jakarta-Sans-Font, SVG-Icons, farbige Abteilungs-Badges - Platzhalter-Hinweis (nur in Signatur-Vorlage _vorlage.html) - LOCAL- und DEMO-Modus im Server Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kendrick Bollens
@@ -35,46 +35,43 @@
|
||||
|
||||
<!-- ── App ── -->
|
||||
<div class="app">
|
||||
<!-- Kategorie-Tabs -->
|
||||
<!-- Kategorie-Navigation -->
|
||||
<nav class="cat-tabs" role="tablist">
|
||||
<button class="cat-tab is-active" data-cat="templates" role="tab">
|
||||
<span class="cat-ico">📄</span> Vorlagen
|
||||
</button>
|
||||
<button class="cat-tab" data-cat="footers" role="tab">
|
||||
<span class="cat-ico">📜</span> Fußzeilen
|
||||
</button>
|
||||
<button class="cat-tab" data-cat="headers" role="tab">
|
||||
<span class="cat-ico">✍️</span> Signaturen
|
||||
</button>
|
||||
<button class="cat-tab is-active" data-cat="templates" role="tab"><span class="ic" data-icon="file-text"></span><span>Vorlagen</span></button>
|
||||
<button class="cat-tab" data-cat="footers" role="tab"><span class="ic" data-icon="panel-bottom"></span><span>Fußzeilen</span></button>
|
||||
<button class="cat-tab" data-cat="headers" role="tab"><span class="ic" data-icon="pen-line"></span><span>Signaturen</span></button>
|
||||
<button class="cat-tab" data-cat="admin" role="tab"><span class="ic" data-icon="settings"></span><span>Verwaltung</span></button>
|
||||
<span class="cat-spacer"></span>
|
||||
<button id="btn-refresh" class="icon-btn" title="Liste neu laden">⟳</button>
|
||||
<button id="btn-refresh" class="icon-btn" title="Liste neu laden"><span class="ic" data-icon="refresh"></span></button>
|
||||
</nav>
|
||||
|
||||
<div class="workspace">
|
||||
<!-- Listen-Spalte -->
|
||||
<aside class="listpane">
|
||||
<div class="listpane-head">
|
||||
<input type="search" id="tree-search" class="tree-search" placeholder="Suchen…" autocomplete="off" />
|
||||
<button id="btn-list-add" class="btn btn-primary btn-sm">＋ Neu</button>
|
||||
<div class="search-wrap">
|
||||
<span class="ic search-ic" data-icon="search"></span>
|
||||
<input type="search" id="tree-search" class="tree-search" placeholder="Suchen…" autocomplete="off" />
|
||||
</div>
|
||||
<button id="btn-list-add" class="btn btn-primary btn-sm"><span class="ic" data-icon="plus"></span><span id="btn-list-add-label">Neu</span></button>
|
||||
</div>
|
||||
<div id="list-body" class="list-body"></div>
|
||||
</aside>
|
||||
|
||||
<!-- Editor-Spalte -->
|
||||
<!-- Inhalts-Spalte -->
|
||||
<main class="editorpane">
|
||||
<!-- Leerzustand -->
|
||||
<div class="empty-state" id="empty-state">
|
||||
<div class="empty-illu" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 4h11l5 5v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z"/>
|
||||
<path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h5"/>
|
||||
<svg viewBox="0 0 24 24" width="60" height="60" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6"/><path d="M9 17h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Wähle links einen Eintrag</h2>
|
||||
<p>Vorlage, Fußzeile oder Signatur anklicken zum Bearbeiten – oder über <strong>＋ Neu</strong> einen neuen Eintrag anlegen.</p>
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<!-- Datei-Editor -->
|
||||
<div class="editor-panel" id="editor-panel" hidden>
|
||||
<div class="editor-head">
|
||||
<div class="editor-titles">
|
||||
@@ -83,12 +80,15 @@
|
||||
</div>
|
||||
<div class="editor-head-actions">
|
||||
<span id="dirty-badge" class="dirty-badge" hidden>Nicht gespeichert</span>
|
||||
<button class="btn btn-ghost" id="btn-reload" title="Vom Server neu laden">Neu laden</button>
|
||||
<button class="btn btn-danger-ghost" id="btn-delete">Löschen</button>
|
||||
<button class="btn btn-primary" id="btn-save">Speichern</button>
|
||||
<button class="btn btn-ghost" id="btn-reload" title="Vom Server neu laden"><span class="ic" data-icon="reload"></span><span>Neu laden</span></button>
|
||||
<button class="btn btn-danger-ghost" id="btn-delete"><span class="ic" data-icon="trash"></span><span>Löschen</span></button>
|
||||
<button class="btn btn-primary" id="btn-save"><span class="ic" data-icon="save"></span><span>Speichern</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ph-bar" id="ph-bar" hidden></div>
|
||||
<div class="ph-details" id="ph-details" hidden></div>
|
||||
|
||||
<div class="editor-tabs" role="tablist">
|
||||
<button class="editor-tab is-active" id="tab-visual" data-view="visual" role="tab">Bearbeiten</button>
|
||||
<button class="editor-tab" id="tab-html" data-view="html" role="tab">HTML</button>
|
||||
@@ -96,19 +96,16 @@
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<div class="epane" id="pane-visual">
|
||||
<textarea id="visual-editor"></textarea>
|
||||
</div>
|
||||
<div class="epane" id="pane-html" hidden>
|
||||
<textarea class="html-editor" id="html-editor" spellcheck="false" wrap="soft"></textarea>
|
||||
</div>
|
||||
<div class="epane" id="pane-visual"><textarea id="visual-editor"></textarea></div>
|
||||
<div class="epane" id="pane-html" hidden><textarea class="html-editor" id="html-editor" spellcheck="false" wrap="soft"></textarea></div>
|
||||
<div class="epane" id="pane-preview" hidden>
|
||||
<div class="preview-frame-wrap">
|
||||
<iframe class="preview-frame" id="preview-frame" title="Vorschau" sandbox=""></iframe>
|
||||
</div>
|
||||
<div class="preview-frame-wrap"><iframe class="preview-frame" id="preview-frame" title="Vorschau" sandbox=""></iframe></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Verwaltung -->
|
||||
<div class="admin-panel" id="admin-panel" hidden></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,9 +114,7 @@
|
||||
<div class="toast-stack" id="toast-stack" aria-live="polite"></div>
|
||||
|
||||
<!-- ── Lade-Overlay ── -->
|
||||
<div class="loading-overlay" id="loading-overlay" hidden>
|
||||
<div class="spinner" aria-label="Lädt"></div>
|
||||
</div>
|
||||
<div class="loading-overlay" id="loading-overlay" hidden><div class="spinner" aria-label="Lädt"></div></div>
|
||||
|
||||
<!-- ── Confirm-Modal ── -->
|
||||
<div class="modal-backdrop" id="confirm-backdrop" hidden>
|
||||
|
||||
Reference in New Issue
Block a user