Update createArticle.php

content/createArticle.php

@@ -4,12 +4,28 @@ if (!isset($_SESSION["user"])) {
     header("Location: index.php?pfad=login");
     exit();
 }
+
+// -------------------------------------------------------------------------
+// Aktuelle Blockliste ermitteln: Session-Fallback (nach Validierungsfehler
+// oder Zwischen-Submit "add_block"/"delete_block") oder leeres Array (Start).
+// -------------------------------------------------------------------------
+$rawContent = '[]';
+if (isset($_SESSION['old_content']) && !empty($_SESSION['old_content'])) {
+    $rawContent = $_SESSION['old_content'];
+    unset($_SESSION['old_content']);
+}
+
+$blocks = json_decode($rawContent, true);
+if (!is_array($blocks)) {
+    $blocks = [];
+}
+$blocks = array_values($blocks); // sequentielle Indizes 0..n-1 sicherstellen
 ?>
 <!--
     Seite: Beitrag erstellen
     Inhalt: Formular für die Erstellung eines neuen Beitrags
 -->
-<form method="post" action="php/controller/createArticle-controller.php" id="editor-form" class="article-editor-scope.editor-container article-editor-scope editor-container">
+<form method="post" action="php/controller/createArticle-controller.php" id="editor-form" enctype="multipart/form-data" class="article-editor-scope.editor-container article-editor-scope editor-container">
 
     <main class="editor-main">
         <?php include_once "includes/alertMessages.php"?>
@@ -18,27 +34,49 @@ if (!isset($_SESSION["user"])) {
                value="<?php echo htmlspecialchars($_SESSION['old_title'] ?? ''); unset($_SESSION['old_title']); ?>"
                placeholder="Titel hier eingeben" required>
 
-        <!-- Hier werden die dynamischen divs via JavaScript eingefügt -->
+        <!--
-        <div id="block-container"></div>
+            Content-Blöcke: werden serverseitig als echte, benannte Formularfelder gerendert
+            (blocks[i][type], blocks[i][text] bzw. blocks[i][image]). Dadurch funktioniert das
+            Hinzufügen/Entfernen von Blöcken und der Bild-Upload auch ganz ohne JavaScript über
+            einen normalen Formular-Submit. Ist JavaScript aktiv, fängt js/editor.js diese
+            Submits ab und erledigt dieselbe Änderung lokal im DOM, ohne den Server zu belasten.
+        -->
+        <div id="block-container">
+            <?php foreach ($blocks as $i => $block): ?>
+                <?php
+                $blockType = $block['type'] ?? '';
+                if ($blockType !== 'text' && $blockType !== 'image') {
+                    continue; // unbekannter/kaputter Block wird übersprungen
+                }
+                ?>
+                <div class="editor-block article-editor-scope" data-index="<?php echo (int)$i; ?>">
+                    <input type="hidden" name="blocks[<?php echo (int)$i; ?>][type]" value="<?php echo htmlspecialchars($blockType); ?>">
 
-        <!-- Plus-Button und das Pop-up-Menü -->
+                    <?php if ($blockType === 'text'): ?>
-        <div id="add-block-control" class="article-editor-scope add-block-control">
+                        <textarea name="blocks[<?php echo (int)$i; ?>][text]"
-            <button type="button" id="plus-button" class="article-editor-scope plus-button">+</button>
+                                  placeholder="Schreibe deinen Textblock..."><?php echo htmlspecialchars($block['value'] ?? ''); ?></textarea>
-            <div id="block-popup" class="article-editor-scope block-popup hidden">
+                    <?php else: /* image */ ?>
-                <button type="button" data-type="text">Textblock</button>
+                        <?php if (!empty($block['value'])): ?>
-                <button type="button" data-type="image">Bild einfügen</button>
+                            <img src="<?php echo htmlspecialchars($block['value']); ?>"
-            </div>
+                                 class="block-image-preview"
+                                 style="max-width:200px;display:block;margin-top:10px;">
+                            <input type="hidden" name="blocks[<?php echo (int)$i; ?>][existing_image]" value="<?php echo htmlspecialchars($block['value']); ?>">
+                        <?php endif; ?>
+                        <input type="file" name="blocks[<?php echo (int)$i; ?>][image]" accept="image/*">
+                    <?php endif; ?>
+
+                    <button type="submit" name="editor_action" value="delete_block:<?php echo (int)$i; ?>" class="delete-block-btn">✕</button>
+                </div>
+            <?php endforeach; ?>
         </div>
 
-        <!-- Unsichtbares Textfeld, das die JSON-Daten hält und an den Controller postet -->
+        <div id="add-block-control" class="article-editor-scope add-block-control">
-        <textarea id="content" name="content" style="display:none;"><?php
+            <button type="button" id="plus-button" class="article-editor-scope plus-button">+</button>
-            if (isset($_SESSION['old_content']) && !empty($_SESSION['old_content'])){
+            <div id="block-popup" class="article-editor-scope block-popup">
-                echo htmlspecialchars($_SESSION['old_content']);
+                <button type="submit" name="editor_action" value="add_text" data-type="text">Textblock</button>
-                unset($_SESSION['old_content']);
+                <button type="submit" name="editor_action" value="add_image" data-type="image">Bild einfügen</button>
-            } else {
+            </div>
-                echo '[]'; // Standardmäßig ein leeres JSON-Array
+        </div>
-            }
-            ?></textarea>
     </main>
 
     <!-- Seitenleiste -->
@@ -268,4 +306,4 @@ if (!isset($_SESSION["user"])) {
 
     </aside>
 
-</form>
+</form>