Update editor.js

This commit is contained in:
2026-06-14 23:00:21 +02:00
parent fc0361ed3a
commit 500bca80c1
+34 -17
View File
@@ -15,6 +15,8 @@ function initEditor() {
const popup = document.getElementById("block-popup"); const popup = document.getElementById("block-popup");
const hiddenContentInput = document.getElementById("content"); const hiddenContentInput = document.getElementById("content");
const initialImages = [];
// Pop-up umschalten bei Klick auf das Plus // Pop-up umschalten bei Klick auf das Plus
plusButton.addEventListener("click", () => { plusButton.addEventListener("click", () => {
popup.classList.toggle("hidden"); popup.classList.toggle("hidden");
@@ -35,25 +37,19 @@ function initEditor() {
blockDiv.classList.add("editor-block"); blockDiv.classList.add("editor-block");
blockDiv.setAttribute("data-type", type); blockDiv.setAttribute("data-type", type);
// Löschen-Button für den Block // Wenn es ein existierendes Server-Bild beim Laden ist, Pfad im globalen Array sichern
if (type === "image" && value && typeof value === 'string' && value.startsWith('uploads/')) {
initialImages.push(value);
blockDiv.setAttribute("data-value", value);
}
// Löschen-Button
const deleteBtn = document.createElement("button"); const deleteBtn = document.createElement("button");
deleteBtn.type = "button"; deleteBtn.type = "button";
deleteBtn.innerHTML = "✕"; deleteBtn.innerHTML = "✕";
deleteBtn.classList.add("delete-block-btn"); deleteBtn.classList.add("delete-block-btn");
deleteBtn.addEventListener("click", () => { deleteBtn.addEventListener("click", () => {
const blockType = blockDiv.getAttribute("data-type"); // ANPASSUNG 2B: Logik hier komplett geleert. Das '✕' entfernt den Block jetzt nur noch sicher aus dem HTML.
// holt den Pfad aus dem data-value Attribut des divs
const blockValue = blockDiv.getAttribute("data-value");
if (blockType === "image" && blockValue && blockValue.startsWith("uploads/")) {
const deletedInput = document.getElementById("deleted-images");
if (deletedInput) {
let deletedList = JSON.parse(deletedInput.value || "[]");
deletedList.push(blockValue);
deletedInput.value = JSON.stringify(deletedList);
}
}
blockDiv.remove(); blockDiv.remove();
}); });
blockDiv.appendChild(deleteBtn); blockDiv.appendChild(deleteBtn);
@@ -98,23 +94,44 @@ function initEditor() {
container.appendChild(blockDiv); container.appendChild(blockDiv);
} }
// Beim Abschicken: HTML-Blöcke auslesen und als JSON-String serialisieren // beim Abschicken verbliebene Blöcke auslesen UND gelöschte Bilder ermitteln
form.addEventListener("submit", function(e) { form.addEventListener("submit", function(e) {
const blocks = []; const blocks = [];
const currentImages = [];
// alle aktuell im Formular verbliebenen Blöcke scannen
container.querySelectorAll(".editor-block").forEach(blockDiv => { container.querySelectorAll(".editor-block").forEach(blockDiv => {
const type = blockDiv.getAttribute("data-type"); const type = blockDiv.getAttribute("data-type");
let value = ""; let value = blockDiv.getAttribute("data-value") || "";
if (type === "text") { if (type === "text") {
value = blockDiv.querySelector("textarea").value; value = blockDiv.querySelector("textarea").value;
} else if (type === "image") { } else if (type === "image") {
value = blockDiv.getAttribute("data-value") || ""; // Pfade sammeln, die der Nutzer NICHT gelöscht hat
if (value && value.startsWith('uploads/')) {
currentImages.push(value);
}
} }
blocks.push({ type: type, value: value }); blocks.push({ type: type, value: value });
}); });
// das reguläre unsichtbare Content-Feld befüllen
hiddenContentInput.value = JSON.stringify(blocks); hiddenContentInput.value = JSON.stringify(blocks);
// Welche Bilder aus 'initialImages' fehlen in 'currentImages' ?
const deletedImages = initialImages.filter(img => !currentImages.includes(img));
// 'deleted_images'-Feld dynamisch erzeugen
let deletedInput = document.getElementById("deleted-images");
if (!deletedInput) {
deletedInput = document.createElement("input");
deletedInput.type = "hidden";
deletedInput.id = "deleted-images";
deletedInput.name = "deleted_images";
form.appendChild(deletedInput);
}
deletedInput.value = JSON.stringify(deletedImages);
}); });
// Existierende Blöcke laden (stellt alte Daten aus der Session wieder her) // Existierende Blöcke laden (stellt alte Daten aus der Session wieder her)