{{define "page-content"}} <h2>Editor</h2> <form id="edit-area" hx-encoding="multipart/form-data"> <div class="flex flex-col gap-y-1"> {{template "article-banner-template" .}} <div class="grid grid-cols-2 gap-4 items-center"> <div class="flex flex-col"> <label for="article-title">Titel</label> <input name="article-title" type="text" value="{{.Article.Title}}" /> </div> <div class="grid grid-cols-1 items-center"> <label class="btn text-center" for="article-banner">Titelbild</label> <input class="hidden" id="article-banner" name="article-banner" type="file" required hx-post="/article/upload-banner" hx-swap="outerHTML" hx-target="#article-banner-container" /> </div> </div> </div> <div class="flex flex-col gap-y-1"> <label for="article-summary">Beschreibung</label> <textarea name="article-summary">{{.Article.Summary}}</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" value="{{.Content}}" /> </div> <div> <span>Tags</span> <div class="flex flex-wrap gap-x-4"> <div> <input id="issue" name="issue" type="checkbox" {{if .Article.IsInIssue}}checked{{end}} /> <label for="issue">Orient Express</label> </div> {{range .Tags}} <div> <input id="tag-{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" {{if index $.Selected .ID}}checked{{end}} /> <label for="tag-{{.Name}}">{{.Name}}</label> </div> {{end}} </div> </div> <div class="btn-area"> <input class="action-btn" type="submit" value="Senden" hx-post="/article/{{.Action}}" 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 => { htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}}); onError(error); }); }, }); easyMDE.codemirror.on("change", () => { document.getElementById('article-content').value = easyMDE.value(); }); </script> {{end}} {{define "article-banner-template"}} <div id="article-banner-container"> <img src="/image/{{.BannerImage}}" alt=""> <input id="article-banner-url" name="article-banner-url" type="hidden" value="{{.BannerImage}}" /> </div> {{end}}