You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
4.5 KiB
HTML
152 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
This Source Code Form is subject to the terms of the Mozilla Public
|
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
-->
|
|
<title>Editor</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css">
|
|
<script src="../js/markdowneditor.js"></script>
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0px;
|
|
font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editor-toolbar {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
height: 2.5rem;
|
|
z-index: 99999;
|
|
background-color: white;
|
|
border: none;
|
|
border-radius: 0px;
|
|
/* Following lines are from Framework7 .elevation-2 */
|
|
-webkit-box-shadow: 0px 3px 1px -2px rgba(0,0,0,.2),0px 2px 2px 0px rgba(0,0,0,.14),0px 1px 5px 0px rgba(0,0,0,.12);
|
|
box-shadow: 0px 3px 1px -2px rgba(0,0,0,.2),0px 2px 2px 0px rgba(0,0,0,.14),0px 1px 5px 0px rgba(0,0,0,.12);
|
|
/* end Framework7 code */
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.toolbar-button {
|
|
cursor: pointer;
|
|
line-height: 2.5rem;
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
}
|
|
|
|
.toolbar-spacer {
|
|
line-height: 2.5rem;
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
color: rgba(0,0,0,.5);
|
|
}
|
|
|
|
#note {
|
|
width: 100%;
|
|
height: calc(100% - 2rem);
|
|
margin-top: 2rem;
|
|
resize: none;
|
|
border: none;
|
|
overflow: auto;
|
|
outline: none;
|
|
box-shadow: none;
|
|
font-size: 1rem;
|
|
padding: 0.75rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="editor-toolbar" id="toolbar">
|
|
<!--<div class="toolbar-button" data-before="**" data-after="**">
|
|
<i class="fas fa-bold fa-fw"></i>
|
|
</div>-->
|
|
</div>
|
|
|
|
<textarea id="note"></textarea>
|
|
|
|
<script>
|
|
var editor;
|
|
function initEditor(markdown) {
|
|
document.getElementById('note').value = markdown;
|
|
editor = new MarkdownEditor(
|
|
document.getElementById('note'),
|
|
document.getElementById("toolbar"),
|
|
[
|
|
{
|
|
label: "Bold",
|
|
icon: "fas fa-bold",
|
|
before: "**",
|
|
after: "**"
|
|
},
|
|
{
|
|
label: "Italic",
|
|
icon: "fas fa-italic",
|
|
before: "*",
|
|
after: "*"
|
|
},
|
|
{
|
|
label: "Heading",
|
|
icon: "fas fa-heading",
|
|
linestart: "#",
|
|
padspace: true,
|
|
maximum: 6
|
|
},
|
|
{
|
|
label: "Strikethrough",
|
|
icon: "fas fa-strikethrough",
|
|
before: "~~",
|
|
after: "~~"
|
|
},
|
|
{
|
|
spacer: true
|
|
},
|
|
{
|
|
label: "Quote",
|
|
icon: "fas fa-quote-left",
|
|
linestart: "> ",
|
|
padspace: false,
|
|
maximum: 6
|
|
},
|
|
{
|
|
label: "Checklist",
|
|
icon: "fas fa-tasks",
|
|
linestart: "- [ ]",
|
|
padspace: true,
|
|
maximum: 1
|
|
},
|
|
{
|
|
label: "List",
|
|
icon: "fas fa-list-ul",
|
|
linestart: "-",
|
|
padspace: true,
|
|
maximum: 1
|
|
}
|
|
]);
|
|
|
|
window.addEventListener('keydown', function (event) {
|
|
if (event.ctrlKey || event.metaKey) {
|
|
switch (String.fromCharCode(event.which).toLowerCase()) {
|
|
case 's':
|
|
event.preventDefault();
|
|
window.parent.sync();
|
|
window.parent.saveme();
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function getMarkdown() {
|
|
return document.getElementById('note').value;
|
|
}
|
|
</script> |