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{
|
||||
{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: "css/tiny-mde.min.css", Url: "https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.css"},
|
||||
{Path: "js/tiny-mde.min.js", Url: "https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"},
|
||||
{Path: "css/easy-mde.min.css", Url: "https://unpkg.com/easymde/dist/easymde.min.css"},
|
||||
{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"},
|
||||
}
|
||||
BaseTemplate string = "base.tmpl.html"
|
||||
|
|
|
|||
|
|
@ -17,38 +17,48 @@
|
|||
<button class="btn btn-primary" type="submit">Save</button>
|
||||
</form>
|
||||
|
||||
<script src="/static/js/tiny-mde.min.js"></script>
|
||||
<script src="/static/js/easy-mde.min.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="/static/css/tiny-mde.min.css"
|
||||
href="/static/css/easy-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',
|
||||
var easyMDE = new EasyMDE({
|
||||
textarea: "noteBodyInput",
|
||||
toolbar: [
|
||||
'bold',
|
||||
'italic',
|
||||
'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',
|
||||
'|',
|
||||
'blockquote', 'hr',
|
||||
'|',
|
||||
'insertLink', 'insertImage'
|
||||
'preview',
|
||||
'side-by-side'
|
||||
],
|
||||
autosave: {enabled: true, uniqueId: "{{.note.Uid}}"},
|
||||
forceSync: true
|
||||
});
|
||||
|
||||
let editTimeout;
|
||||
let autoSaveDelay = 2000;
|
||||
|
||||
tinyMDE.addEventListener("change", function() {
|
||||
easyMDE.codemirror.on("change" , function() {
|
||||
clearTimeout(editTimeout);
|
||||
editTimeout = setTimeout(() => {
|
||||
let form = document.querySelector("form");
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue