Implemented EasyMDE
This commit is contained in:
parent
46a0cec6df
commit
32f11f57b5
@ -1,9 +1,11 @@
|
||||
package frontend
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"io"
|
||||
"io/fs"
|
||||
"log"
|
||||
"net/http"
|
||||
"os"
|
||||
@ -462,6 +464,12 @@ func UploadImage(c *b.Config) http.HandlerFunc {
|
||||
return
|
||||
}
|
||||
|
||||
if err = os.MkdirAll(fmt.Sprint(c.PicsDir, "/"), fs.FileMode(0755)); err != nil {
|
||||
log.Println(err)
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
img, err := os.Create(absFilepath)
|
||||
if err != nil {
|
||||
log.Println(err)
|
||||
@ -476,10 +484,9 @@ func UploadImage(c *b.Config) http.HandlerFunc {
|
||||
return
|
||||
}
|
||||
|
||||
alt := strings.Join(nameStrings[0:len(nameStrings)-1], " ")
|
||||
imgMD := fmt.Sprint("![", alt, "](", c.Domain, "/pics/", filename, ")")
|
||||
tmpl, err := template.ParseFiles(c.WebDir + "/templates/editor.html")
|
||||
template.Must(tmpl, err).ExecuteTemplate(w, "editor-images", imgMD)
|
||||
url := fmt.Sprint(c.Domain, "/pics/", filename)
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
json.NewEncoder(w).Encode(url)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,9 +2,6 @@
|
||||
<h2>Editor</h2>
|
||||
|
||||
<form id="edit-area">
|
||||
{{if eq .Mode 0}}
|
||||
<button class="btn" hx-post="/preview-article" hx-target="#page-content">Vorschau</button>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<label for="article-title">Titel</label>
|
||||
<input name="article-title" type="text" value="{{.Title}}" />
|
||||
@ -15,8 +12,9 @@
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="article-content">Artikel</label>
|
||||
<textarea name="article-content">{{.Content}}</textarea>
|
||||
<textarea id="easyMDE">{{.Content}}</textarea>
|
||||
</div>
|
||||
<input id="article-content" name="article-content" type="hidden" />
|
||||
|
||||
<div>
|
||||
<span>Tags</span>
|
||||
@ -30,63 +28,40 @@
|
||||
</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="/submit-article" hx-target="#page-content" />
|
||||
<button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<button class="btn" hx-get="/write-article" hx-target="#page-content">Schreiben</button>
|
||||
|
||||
<span>Titel</span>
|
||||
<div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
|
||||
{{.Title}}
|
||||
</div>
|
||||
|
||||
<span>Beschreibung</span>
|
||||
<div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
|
||||
{{.Description}}
|
||||
</div>
|
||||
|
||||
<span>Artikel</span>
|
||||
<div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
|
||||
<div class="prose">
|
||||
{{.HTMLContent}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</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);
|
||||
}
|
||||
fetch('/upload-image', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
onSuccess(data);
|
||||
})
|
||||
.catch(error => {
|
||||
onError(error);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
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}}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Orient Editor</title>
|
||||
<link href="/web/static/css/style.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col justify-between min-h-screen bg-slate-50">
|
||||
@ -25,7 +26,8 @@
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="/web/static/js/htmx.min.js"></script>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.1"></script>
|
||||
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
||||
</body>
|
||||
|
||||
</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}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user