Implemented EasyMDE

web/templates/rework-article.html

@@ -14,6 +14,7 @@
         <label for="article-content">Artikel</label>
         <textarea name="article-content" placeholder="Artikel">{{.Article.Content}}</textarea>
     </div>
+    <input id="article-content" name="article-content" type="hidden" />
 
     <div>
         <span>Tags</span>
@@ -28,11 +29,6 @@
         </div>
     </div>
 
-    <div id="editor-images">
-        <input class="mb-2" name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image"
-            hx-swap="beforeend" hx-target="#editor-images" />
-    </div>
-
     <div class="btn-area">
         <input class="action-btn" type="submit" value="Senden" hx-post="/resubmit-article/{{.Article.ID}}"
             hx-target="#page-content" />
@@ -41,32 +37,33 @@
 </form>
 
 <script>
-    function copyToClipboard(text) {
-        event.preventDefault(); // Get-Request verhindern
+    var easyMDE = new EasyMDE({
+        element: document.getElementById('easyMDE'),
+        hideIcons: ['image'],
+        imageTexts: {sbInit: ''},
+        showIcons: ["code", "table", "upload-image"],
+        uploadImage: true,
 
-        var textarea = document.createElement("textarea");
-        textarea.textContent = text;
-        document.body.appendChild(textarea);
+        imageUploadFunction: function (file, onSuccess, onError) {
+            var formData = new FormData();
+            formData.append('article-image', file);
 
-        textarea.select();
-        try {
-            document.execCommand('copy');
-        } catch (err) {
-            console.warn('Fehler beim Kopieren', err);
-        }
-
-        document.body.removeChild(textarea);
-    }
+            fetch('/upload-image', {
+                method: 'POST',
+                body: formData
+            })
+                .then(response => response.json())
+                .then(data => {
+                    onSuccess(data);
+                })
+                .catch(error => {
+                    onError(error);
+                });
+        },
+    });
 
+    easyMDE.codemirror.on("change", () => {
+        document.getElementById('article-content').value = easyMDE.value();
+    });
 </script>
 {{end}}
-
-{{define "editor-images"}}
-{{if gt (len .) 0}}
-<div class="border px-2 py-1 rounded-md flex gap-4 justify-between">
-    <div class="self-center">{{.}}</div>
-    <button class="bg-slate-50 border my-2 px-3 py-2 rounded-md w-32 hover:bg-slate-100"
-        onclick="copyToClipboard('{{.}}')">Kopieren</button>
-</div>
-{{end}}
-{{end}}