Halfway trough editor

This commit is contained in:
Senad Uka
2023-09-09 05:43:31 +02:00
parent a3187bdcc1
commit 1765a150bb
10 changed files with 219 additions and 16 deletions

View File

@@ -32,7 +32,6 @@ func StartServer(waitgroup *sync.WaitGroup) {
r.HandleFunc("/y/{year}/m/{month}/", monthHandler)
r.HandleFunc("/editor/e/{postID}", editHandler)
r.HandleFunc("/editor/n/", newHandler)
r.HandeeFunc("/editor", editorHandler)
err = http.ListenAndServe(":8018", r)
if err != nil {

View File

@@ -1,16 +1,97 @@
package cethttp
const editorPage = `
<form action="/save" method="POST">
<input type="text" name="title" placeholder="Naslov" />
<input type="hidden" value="{{.PostID}}" />
<div id="editor"></div>
import (
"html/template"
"strings"
"github.com/senaduka/cetvorke/database"
)
const editorTemplate = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IslamBosna</title>
<style>
html, body {
background-color: #171714;
color: #f9f5c3;
font-family: sans-serif;
justify-content: center;
}
header {
width: 100%;
padding-top: 0.5em;
padding-bottom: 0.5em;
font-family: sans-serif;
font-size: 3em;
background-color: #0f1115;
justify-content: center;
}
header div, content div {
max-width: 800px;
margin: auto;
}
a:link, a:visited {
color: #f9f5c3;
}
header a:link {
color: #f9f5c3;
text-decoration: none;
}
header a:visited {
color: #f9f5c3;
text-decoration: none;
}
h1 {
color: #e6fbfb;
}
#editorcontainer {
background-color: #ffffff;
}
</style>
<link rel="stylesheet" href="/static/pen.css" />
<script src="/static/markdown.js"></script>
<script src="/static/pen.js"></script>
</head>
<body>
<header>
<div>
<a href="/">☙ IslamBosna</a>
</div>
</header>
<content>
<div>
<form method="POST">
<input type="text" name="title" placeholder="Naslov" value="{{.Title}}" />
<input name="ID" type="hidden" value="{{.ID}}" />
<div id="editorcontainer">
<div id="editor">{{.MarkdownContent}}</div>
</div>
</div>
</content>
<footer>
&nbsp;
</footer>
<script>
const editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'wysiwyg',
previewStyle: 'tab'
});
const editor = new Pen('#editor');
</script>
</body>
</html>
`
func editorHtml5Page(post *database.Post) string {
t1 := template.New("editorHtml5Page")
t1, _ = t1.Parse(editorTemplate)
result := new(strings.Builder)
t1.Execute(result, post)
return result.String()
}

View File

@@ -1 +1,65 @@
package cethttp
import (
"net/http"
"strconv"
"github.com/gorilla/mux"
"github.com/senaduka/cetvorke/database"
)
// editHandler handles the editing of an existing post.
func editHandler(w http.ResponseWriter, r *http.Request) {
vars := mux.Vars(r)
postID, err := strconv.Atoi(vars["postID"])
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
// Fetch the post from the database.
post, err := database.GetPost(postID)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
// Check if the request method is POST.
if r.Method == "POST" {
// Get the edited content from the form.
editedContent := r.FormValue("editor")
editedTitle := r.FormValue("title")
// Update the post content.
post.Content = editedContent
post.Title = editedTitle
// Save the edited post to the database.
err := database.UpdatePost(post)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
// Redirect to the edited post.
http.Redirect(w, r, "/p/"+vars["postID"]+"/"+post.TitleSlug, http.StatusSeeOther)
return
}
// Display the edit form.
response := editorHtml5Page(post)
w.Write([]byte(response))
}
// newHandler handles the creation of a new post.
func newHandler(w http.ResponseWriter, r *http.Request) {
// Create a new empty post in the database.
newPost, err := database.CreateNewPost()
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
// Redirect to the editHandler for the new post.
http.Redirect(w, r, "/editor/e/"+strconv.Itoa(newPost.ID), http.StatusSeeOther)
}

View File

@@ -51,10 +51,7 @@ const html5Template = `
color: #e6fbfb;
}
</style>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
</head>
<body>
<header>