- {% if variablen %}
-
-
-
-
-
-
- {% for var, beschreibung in variablen.items %}
-
-
- {% templatetag openvariable %} {{ var }} {% templatetag closevariable %}
- |
- {{ beschreibung }} |
-
- {% endfor %}
-
-
-
-
-
- {% endif %}
-
-
-
-
-
- - Zuletzt bearbeitet
- - {{ vorlage.zuletzt_bearbeitet_am|date:"d.m.Y H:i" }}
- {% if vorlage.zuletzt_bearbeitet_von %}
- - Bearbeitet von
- - {{ vorlage.zuletzt_bearbeitet_von.get_full_name|default:vorlage.zuletzt_bearbeitet_von.username }}
- {% endif %}
- - Erstellt am
- - {{ vorlage.erstellt_am|date:"d.m.Y" }}
-
-
+
+
+
+
+ Vorschau wird geladen...
+
{% endblock %}
@@ -180,15 +195,22 @@
var useCodeEditor = {{ use_code_editor|yesno:"true,false" }};
var editor = document.getElementById('code-editor');
+ var summernoteActive = false;
- // Code-Editor-Modus: Plain textarea fuer vollstaendige HTML-Dokumente
- // (Serienbrief-Vorlagen mit DOCTYPE, Template-Tags usw.)
+ // Returns current HTML content regardless of editor mode
+ function getEditorContent() {
+ if (summernoteActive) {
+ return $('#code-editor').summernote('code');
+ }
+ return editor.value;
+ }
+
+ // ---- Editor setup ----
if (useCodeEditor) {
+ // Plain textarea for full HTML documents (Serienbrief)
if (initialContent) {
editor.value = initialContent;
}
-
- // Tab-Taste einfügen statt Fokus wechseln
editor.addEventListener('keydown', function(e) {
if (e.key === 'Tab') {
e.preventDefault();
@@ -198,8 +220,7 @@
this.selectionStart = this.selectionEnd = start + 4;
}
});
-
- // Variablen einfügen bei Klick
+ // Variable insertion for code editor
document.querySelectorAll('.var-item').forEach(function(row) {
row.addEventListener('click', function() {
var varName = this.getAttribute('data-var');
@@ -210,101 +231,100 @@
editor.focus();
});
});
-
- // Vorschau
- var previewArea = document.getElementById('preview-area');
- var previewFrame = document.getElementById('preview-frame');
- document.getElementById('btn-preview').addEventListener('click', function() {
- var formData = new FormData();
- formData.append('html_inhalt', editor.value);
- formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);
- fetch('{% url "stiftung:vorlage_vorschau" pk=vorlage.pk %}', { method: 'POST', body: formData })
- .then(function(r) { return r.text(); })
- .then(function(html) {
- previewFrame.srcdoc = html;
- previewArea.style.display = 'block';
- previewArea.scrollIntoView({behavior: 'smooth'});
- })
- .catch(function(err) { alert('Vorschau fehlgeschlagen: ' + err); });
- });
- document.getElementById('btn-close-preview').addEventListener('click', function() {
- previewArea.style.display = 'none';
- });
-
- return; // Skip Summernote initialization
- }
-
- if (typeof $ === 'undefined' || typeof $.fn.summernote === 'undefined') {
- // Fallback: Summernote nicht geladen — Textarea sichtbar lassen
- if (editor) { editor.style.height = '520px'; editor.style.fontFamily = 'monospace'; editor.style.fontSize = '13px'; }
- return;
- }
-
- // Summernote initialisieren (für HTML-Fragment-Vorlagen: E-Mail, PDF-Fragmente)
- $('#code-editor').summernote({
- lang: 'de-DE',
- height: 520,
- toolbar: [
- ['style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
- ['para', ['style', 'ul', 'ol', 'paragraph']],
- ['table', ['table']],
- ['insert', ['link', 'hr']],
- ['view', ['fullscreen', 'codeview', 'undo', 'redo']],
- ],
- callbacks: {
- onInit: function() {
- if (initialContent) {
- $('#code-editor').summernote('code', initialContent);
+ } else if (typeof $ !== 'undefined' && typeof $.fn.summernote !== 'undefined') {
+ // Summernote WYSIWYG for HTML fragment templates
+ $('#code-editor').summernote({
+ lang: 'de-DE',
+ height: 520,
+ toolbar: [
+ ['style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
+ ['para', ['style', 'ul', 'ol', 'paragraph']],
+ ['table', ['table']],
+ ['insert', ['link', 'hr']],
+ ['view', ['fullscreen', 'codeview', 'undo', 'redo']],
+ ],
+ callbacks: {
+ onInit: function() {
+ if (initialContent) {
+ $('#code-editor').summernote('code', initialContent);
+ }
}
}
- }
- });
-
- // Variablen einfügen bei Klick
- document.querySelectorAll('.var-item').forEach(function(row) {
- row.addEventListener('click', function() {
- const varName = this.getAttribute('data-var');
- const placeholder = String.fromCharCode(123,123) + ' ' + varName + ' ' + String.fromCharCode(125,125);
- $('#code-editor').summernote('focus');
- $('#code-editor').summernote('insertText', placeholder);
});
- });
+ summernoteActive = true;
- // Vorschau
- const previewArea = document.getElementById('preview-area');
- const previewFrame = document.getElementById('preview-frame');
- const btnPreview = document.getElementById('btn-preview');
- const btnClosePreview = document.getElementById('btn-close-preview');
+ // Variable insertion for Summernote
+ document.querySelectorAll('.var-item').forEach(function(row) {
+ row.addEventListener('click', function() {
+ var varName = this.getAttribute('data-var');
+ var placeholder = String.fromCharCode(123,123) + ' ' + varName + ' ' + String.fromCharCode(125,125);
+ $('#code-editor').summernote('focus');
+ $('#code-editor').summernote('insertText', placeholder);
+ });
+ });
- btnPreview.addEventListener('click', function() {
- const content = $('#code-editor').summernote('code');
- const formData = new FormData();
+ // Sync Summernote to textarea on form submit
+ document.getElementById('editor-form').addEventListener('submit', function() {
+ document.querySelector('textarea[name=html_inhalt]').value = getEditorContent();
+ });
+ } else {
+ // Fallback: Summernote not loaded — style textarea as code editor
+ if (editor) {
+ editor.style.height = '70vh';
+ editor.style.fontFamily = "'SFMono-Regular', Consolas, monospace";
+ editor.style.fontSize = '13px';
+ editor.style.padding = '12px';
+ editor.style.background = '#f8f9fa';
+ }
+ if (initialContent) {
+ editor.value = initialContent;
+ }
+ // Variable insertion for plain textarea fallback
+ document.querySelectorAll('.var-item').forEach(function(row) {
+ row.addEventListener('click', function() {
+ var varName = this.getAttribute('data-var');
+ var placeholder = String.fromCharCode(123,123) + ' ' + varName + ' ' + String.fromCharCode(125,125);
+ var start = editor.selectionStart;
+ editor.value = editor.value.substring(0, start) + placeholder + editor.value.substring(editor.selectionEnd);
+ editor.selectionStart = editor.selectionEnd = start + placeholder.length;
+ editor.focus();
+ });
+ });
+ }
+
+ // ---- Preview (always set up, independent of editor mode) ----
+ var previewFrame = document.getElementById('preview-frame');
+ var previewLoading = document.getElementById('preview-loading');
+ var previewLoaded = false;
+
+ function loadPreview() {
+ var content = getEditorContent();
+ var formData = new FormData();
formData.append('html_inhalt', content);
formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);
+ previewLoading.style.display = 'block';
+ previewFrame.style.display = 'none';
+
fetch('{% url "stiftung:vorlage_vorschau" pk=vorlage.pk %}', {
method: 'POST',
body: formData,
})
- .then(r => r.text())
- .then(html => {
+ .then(function(r) { return r.text(); })
+ .then(function(html) {
previewFrame.srcdoc = html;
- previewArea.style.display = 'block';
- previewArea.scrollIntoView({behavior: 'smooth'});
+ previewFrame.style.display = 'block';
+ previewLoading.style.display = 'none';
+ previewLoaded = true;
})
- .catch(err => alert('Vorschau fehlgeschlagen: ' + err));
- });
+ .catch(function(err) {
+ previewLoading.innerHTML = '
Vorschau fehlgeschlagen: ' + err;
+ });
+ }
- btnClosePreview.addEventListener('click', function() {
- previewArea.style.display = 'none';
- });
-
- // Formular-Submit: Summernote-Inhalt in Textarea schreiben
- document.getElementById('editor-form').addEventListener('submit', function() {
- // Summernote schreibt den Inhalt automatisch in die Textarea beim Submit
- // Sicherheitshalber explizit synchronisieren:
- const content = $('#code-editor').summernote('code');
- document.querySelector('textarea[name=html_inhalt]').value = content;
+ // Load preview when switching to the Vorschau tab
+ document.getElementById('btn-tab-vorschau').addEventListener('shown.bs.tab', function() {
+ loadPreview();
});
})();