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.
NotePostApp/www/pages/editor_lite.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: 2.5rem;
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>