{{define "page-content"}} <h2>Editor</h2> <form id="edit-area"> <div class="flex flex-col gap-y-1"> <label for="article-title">Titel</label> <input name="article-title" type="text" value="{{.Title}}" /> </div> <div class="flex flex-col gap-y-1"> <label for="article-description">Beschreibung</label> <textarea name="article-description">{{.Description}}</textarea> </div> <div class="flex flex-col gap-y-1"> <label for="easyMDE">Artikel</label> <textarea id="easyMDE">{{.Content}}</textarea> <input id="article-content" name="article-content" type="hidden" /> </div> <div> <span>Tags</span> <div class="flex flex-wrap gap-x-4"> <div> <input id="issue" name="issue" type="checkbox" /> <label for="issue">Orient Express</label> </div> {{range .Tags}} <div> <input id="{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" /> <label for="{{.Name}}">{{.Name}}</label> </div> {{end}} </div> </div> <div class="btn-area"> <input class="action-btn" type="submit" value="Senden" hx-post="/article/submit" hx-target="#page-content" /> <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button> </div> </form> <script> var easyMDE = new EasyMDE({ element: document.getElementById('easyMDE'), hideIcons: ['image'], imageTexts: {sbInit: ''}, showIcons: ["code", "table", "upload-image"], uploadImage: true, imageUploadFunction: function (file, onSuccess, onError) { var formData = new FormData(); formData.append('article-image', file); fetch('/article/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}}