main.js, quilljs editor + route

README.md

@@ -2,7 +2,7 @@
 
 Wiki web application models built using `Go`
 
-<!-- img.shields.io -->
+![Go](https://img.shields.io/github/go-mod/go-version/rjNemo/go-wiki) [![License](https://img.shields.io/github/license/rjNemo/go-wiki)](LICENSE.md) ![Release](https://img.shields.io/github/v/release/rjNemo/go-wiki) ![Tag](https://img.shields.io/github/v/tag/rjNemo/go-wiki)
 
 ## Getting Started
 
@@ -38,6 +38,7 @@ Add additional notes about how to deploy this on a live system
 
 - [Go](https://golang.org/) - Build simple, reliable, and efficient software
 - [Bootstrap](https://getbootstrap.com/) - The most popular HTML, CSS, and JS library in the world
+- [Quilljs](https://quilljs.com/) - Your powerful rich text editor
 
 ## Contributing
 

TODO.md

@@ -4,3 +4,4 @@
 - [ ] All errors are fatal. Provide proper error handling.
 - [ ] Refactor UserStore code
 - [ ] Request-scoped [context](https://www.alexedwards.net/blog/organising-database-access)
+- [ ] Post quilljs data to backend

controllers/page.go

@@ -41,6 +41,10 @@ func (ph PageHandler) edit(w http.ResponseWriter, r *http.Request, title string)
 	views.Template(w, "edit", p)
 }
 
+func (ph PageHandler) editor(w http.ResponseWriter, r *http.Request, title string) {
+	log.Println(r.Body)
+}
+
 func (ph PageHandler) save(w http.ResponseWriter, r *http.Request, title string) {
 	body := r.FormValue("body")
 

controllers/router.go

@@ -16,6 +16,7 @@ func Router(ctx data.Context) {
 	http.HandleFunc("/index/", ph.index)
 	http.HandleFunc("/view/", makeHandler(ph.view))
 	http.HandleFunc("/edit/", makeHandler(ph.edit))
+	http.HandleFunc("/editor/", makeHandler(ph.editor))
 	http.HandleFunc("/save/", makeHandler(ph.save))
 	http.HandleFunc("/new/", ph.new)
 	http.HandleFunc("/contact/", hh.contact)

static/main.js

@@ -0,0 +1,15 @@
+let quill = new Quill("#editor", {
+  theme: "snow"
+});
+
+function save() {
+  let text = quill.getContents();
+  console.log(text);
+
+  fetch("http://localhost:8080/editor", {
+    method: "post",
+    headers: { Accept: "application/json", "Content-Type": "application/json" }
+  });
+
+  console.log("send to backend");
+}

views/templates/editor.html

@@ -0,0 +1,46 @@
+{{define "title"}} {{.Title}} | Go-Wiki {{end}} {{define "content"}}
+<h1>Editing {{.Title}}</h1>
+<!-- Include stylesheet -->
+<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
+
+<!-- Create the editor container -->
+<div id="editor">
+  <h1>{{.Title}}</h1>
+  <p><br /></p>
+  <p>{{printf "%s" .Body}}</p>
+  <p><br /></p>
+</div>
+
+<div class="form-group">
+  <form onsubmit="save()">
+    <input class="btn btn-primary" type="submit" value="Save changes" />
+  </form>
+</div>
+
+<!-- Include the Quill library -->
+<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+
+<!-- Initialize Quill editor -->
+<script>
+  let quill = new Quill("#editor", {
+    theme: "snow"
+  });
+
+  save = async () => {
+    // e.preventDefault();
+    console.log("send to backend");
+    let text = quill.getContents();
+    console.log(text);
+
+    response = await fetch("http://localhost:8080/editor", {
+      method: "POST",
+      body: JSON.stringify(text),
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      }
+    }).then(r => console.log(r.json()));
+    // return await response.json();
+  };
+</script>
+{{end}}