Use tinyMDE which has better checklist support
This commit is contained in:
parent
d7b56c3b86
commit
cb24ab18c5
2 changed files with 28 additions and 18 deletions
|
|
@ -67,8 +67,8 @@ var (
|
||||||
assets []Asset = []Asset{
|
assets []Asset = []Asset{
|
||||||
{Path: "css/bootstrap.min.css", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"},
|
{Path: "css/bootstrap.min.css", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"},
|
||||||
{Path: "js/bootstrap.bundle.min.js", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"},
|
{Path: "js/bootstrap.bundle.min.js", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"},
|
||||||
{Path: "css/tiny-mde.min.css", Url: "https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.css"},
|
{Path: "css/easy-mde.min.css", Url: "https://unpkg.com/easymde/dist/easymde.min.css"},
|
||||||
{Path: "js/tiny-mde.min.js", Url: "https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"},
|
{Path: "js/easy-mde.min.js", Url: "https://unpkg.com/easymde/dist/easymde.min.js"},
|
||||||
{Path: "icons/eye.svg", Url: "https://raw.githubusercontent.com/twbs/icons/refs/heads/main/icons/eye.svg"},
|
{Path: "icons/eye.svg", Url: "https://raw.githubusercontent.com/twbs/icons/refs/heads/main/icons/eye.svg"},
|
||||||
}
|
}
|
||||||
BaseTemplate string = "base.tmpl.html"
|
BaseTemplate string = "base.tmpl.html"
|
||||||
|
|
|
||||||
|
|
@ -17,38 +17,48 @@
|
||||||
<button class="btn btn-primary" type="submit">Save</button>
|
<button class="btn btn-primary" type="submit">Save</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<script src="/static/js/tiny-mde.min.js"></script>
|
<script src="/static/js/easy-mde.min.js"></script>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
type="text/css"
|
type="text/css"
|
||||||
href="/static/css/tiny-mde.min.css"
|
href="/static/css/easy-mde.min.css"
|
||||||
/>
|
/>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
|
||||||
var tinyMDE = new TinyMDE.Editor({ textarea: "noteBodyInput" });
|
var easyMDE = new EasyMDE({
|
||||||
var commandBar = new TinyMDE.CommandBar({
|
textarea: "noteBodyInput",
|
||||||
element: "toolbar",
|
toolbar: [
|
||||||
editor: tinyMDE,
|
'bold',
|
||||||
commands: [
|
'italic',
|
||||||
'bold', 'italic', 'strikethrough',
|
'strikethrough',
|
||||||
|
'heading',
|
||||||
'|',
|
'|',
|
||||||
'code',
|
'unordered-list',
|
||||||
|
'ordered-list',
|
||||||
|
{
|
||||||
|
name: 'checklist',
|
||||||
|
action: (e) => {
|
||||||
|
e.codemirror.replaceSelection('* [ ] ');
|
||||||
|
e.codemirror.focus();
|
||||||
|
},
|
||||||
|
className: 'fa fa-check-square-o',
|
||||||
|
title: 'Add task list',
|
||||||
|
},
|
||||||
'|',
|
'|',
|
||||||
'h1', 'h2',
|
'link',
|
||||||
'|',
|
'|',
|
||||||
'ul', 'ol',
|
'preview',
|
||||||
'|',
|
'side-by-side'
|
||||||
'blockquote', 'hr',
|
|
||||||
'|',
|
|
||||||
'insertLink', 'insertImage'
|
|
||||||
],
|
],
|
||||||
|
autosave: {enabled: true, uniqueId: "{{.note.Uid}}"},
|
||||||
|
forceSync: true
|
||||||
});
|
});
|
||||||
|
|
||||||
let editTimeout;
|
let editTimeout;
|
||||||
let autoSaveDelay = 2000;
|
let autoSaveDelay = 2000;
|
||||||
|
|
||||||
tinyMDE.addEventListener("change", function() {
|
easyMDE.codemirror.on("change" , function() {
|
||||||
clearTimeout(editTimeout);
|
clearTimeout(editTimeout);
|
||||||
editTimeout = setTimeout(() => {
|
editTimeout = setTimeout(() => {
|
||||||
let form = document.querySelector("form");
|
let form = document.querySelector("form");
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue