cpolis/web/templates/editor.html

{{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">
        <label for="article-description">Beschreibung</label>
        <textarea name="article-description">{{.Description}}</textarea>
    </div>
    <div class="flex flex-col">
        <label for="article-content">Artikel</label>
        <textarea id="easyMDE">{{.Content}}</textarea>
    </div>
    <input id="article-content" name="article-content" type="hidden" />

    <div>
        <span>Tags</span>
        <div class="flex flex-wrap gap-x-4">
            {{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('/image/upload', {
                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}}