67 lines
1.8 KiB
HTML
67 lines
1.8 KiB
HTML
{{define "title"}}Edit: {{.note.Title}}{{end}}
|
|
{{define "navExtra"}}<!-- -->{{end}}
|
|
|
|
{{define "main"}}
|
|
<form action="{{.urlSave}}" method="POST">
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" id="noteTitleInput" name="title" aria-described-by="titleHelp" value="{{.note.Title}}"/>
|
|
<div id="titleHelp" class="form-text">Enter your note title</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="border rounded rounded-1">
|
|
<div id="toolbar"></div>
|
|
<textarea class="form-control" id="noteBodyInput" name="body" aria-described-by="bodyHelp">{{.text}}</textarea>
|
|
</div>
|
|
<div id="bodyHelp" class="form-text">Enter your note content in markdown</div>
|
|
</div>
|
|
<button class="btn btn-primary" type="submit">Save</button>
|
|
</form>
|
|
|
|
<script src="/static/js/tiny-mde.min.js"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="/static/css/tiny-mde.min.css"
|
|
/>
|
|
<script type="text/javascript">
|
|
|
|
|
|
var tinyMDE = new TinyMDE.Editor({ textarea: "noteBodyInput" });
|
|
var commandBar = new TinyMDE.CommandBar({
|
|
element: "toolbar",
|
|
editor: tinyMDE,
|
|
commands: [
|
|
'bold', 'italic', 'strikethrough',
|
|
'|',
|
|
'code',
|
|
'|',
|
|
'h1', 'h2',
|
|
'|',
|
|
'ul', 'ol',
|
|
'|',
|
|
'blockquote', 'hr',
|
|
'|',
|
|
'insertLink', 'insertImage'
|
|
],
|
|
});
|
|
|
|
let editTimeout;
|
|
let autoSaveDelay = 2000;
|
|
|
|
tinyMDE.addEventListener("change", function() {
|
|
clearTimeout(editTimeout);
|
|
editTimeout = setTimeout(() => {
|
|
let form = document.querySelector("form");
|
|
let formData = new FormData(form);
|
|
|
|
fetch("{{.urlSave}}", {
|
|
method: "POST",
|
|
body: formData,
|
|
}).then((data) => {
|
|
console.log("Saved Note")
|
|
});
|
|
}, autoSaveDelay);
|
|
});
|
|
|
|
</script>
|
|
{{end}}
|