Browse Source

Fix issue #1 by moving the editor to an iframe

tags/v1.1.0
Skylar Ittner 9 months ago
parent
commit
43142f0285
3 changed files with 89 additions and 31 deletions
  1. 19
    1
      www/js/editnote.js
  2. 4
    30
      www/pages/editnote.html
  3. 66
    0
      www/pages/editor.html

+ 19
- 1
www/js/editnote.js View File

@@ -19,6 +19,7 @@ function saveme(callback) {
}
}

sync();
var noteid = $("#note_content").data("noteid");
if (noteid == "") {
var note = {
@@ -39,6 +40,7 @@ function saveme(callback) {
}

function exiteditor() {
sync();
if ($("#note_content").val() == "" || $("#note_content").val() === $("#orig_content").val()) {
router.back({force: true, ignoreCache: true, reload: true});
} else {
@@ -46,4 +48,20 @@ function exiteditor() {
router.back({force: true, ignoreCache: true, reload: true});
});
}
}
}

function init() {
document.getElementById("noteframe").contentWindow.initEditor($("#note_content").val());
}

/**
* Get the text from the editor iframe and put it in the hidden textarea
* @returns {undefined}
*/
function sync() {
$("#note_content").val(document.getElementById("noteframe").contentWindow.getMarkdown());
}

$("#noteframe").on("load", function () {
init();
});

+ 4
- 30
www/pages/editnote.html View File

@@ -26,40 +26,14 @@
</div>
</div>

<div class="page-content ptr-content">

<textarea id="note_content" data-noteid="{{noteid}}">{{content}}</textarea>
<div class="page-content">
<textarea id="note_content" style="display: none;" data-noteid="{{noteid}}">{{content}}</textarea>
<textarea id="orig_content" style="display: none;">{{content}}</textarea>

<iframe id="noteframe" src="pages/editor.html" style="width: 100%; height: 98%; border: 0px; padding: 0px; margin: 0px;"></iframe>

</div>

<script src="js/editnote.js"></script>

<script>
var easymde = new EasyMDE({
element: $("#note_content")[0],
autoDownloadFontAwesome: false,
autofocus: false,
forceSync: true,
status: false,
spellChecker: false,
toolbar: [
"bold",
"italic",
"heading",
"|",
"quote",
"unordered-list",
"ordered-list",
"horizontal-rule"
]
});

$(".editor-toolbar").addClass("elevation-1");

$(".navbar").on("resize", function () {
$(".editor-toolbar").css("top", $(".navbar").css("height"));
});
</script>

</div>

+ 66
- 0
www/pages/editor.html View File

@@ -0,0 +1,66 @@
<!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">
<link rel="stylesheet" href="../node_modules/easymde/dist/easymde.min.css">
<script src="../node_modules/easymde/dist/easymde.min.js"></script>

<style>
body {
margin: 0px;
font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
}

.CodeMirror {
border: none;
margin-top: 45px;
}

.editor-toolbar {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 99999;
background-color: white;
border: none;
border-radius: 0px;
}
</style>

<textarea id="note"></textarea>

<script>
var easymde;
function initEditor(markdown) {
document.getElementById('note').value = markdown;
easymde = new EasyMDE({
element: document.getElementById("note"),
autoDownloadFontAwesome: false,
autofocus: true,
forceSync: true,
status: false,
spellChecker: false,
toolbar: [
"bold",
"italic",
"heading",
"|",
"quote",
"unordered-list",
"ordered-list",
"horizontal-rule"
]
});
}

function getMarkdown() {
return document.getElementById('note').value;
}
</script>

Loading…
Cancel
Save