Update editor.js
This commit is contained in:
+34
-17
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user