Apps/NotePostApp
2
0
Fork 0
Code Issues 1 Pull Requests Releases 5 Wiki Activity

Fix issue #1 by moving the editor to an iframe

Browse Source
This commit is contained in:
Skylar Ittner 2019-01-13 01:41:03 -07:00
parent 8dd6a9872d
commit 43142f0285
3 changed files with 89 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
www/js/editnote.js
View File

@ -19,6 +19,7 @@ function saveme(callback) {
} }
} }
sync();
var noteid = $("#note_content").data("noteid"); var noteid = $("#note_content").data("noteid");
if (noteid == "") { if (noteid == "") {
var note = { var note = {
@ -39,6 +40,7 @@ function saveme(callback) {
} }
function exiteditor() { function exiteditor() {
sync();
if ($("#note_content").val() == "" || $("#note_content").val() === $("#orig_content").val()) { if ($("#note_content").val() == "" || $("#note_content").val() === $("#orig_content").val()) {
router.back({force: true, ignoreCache: true, reload: true}); router.back({force: true, ignoreCache: true, reload: true});
} else { } else {
@ -47,3 +49,19 @@ function exiteditor() {
}); });
} }
} }
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();
});

34
www/pages/editnote.html
View File

@ -26,40 +26,14 @@
</div> </div>
</div> </div>
<div class="page-content ptr-content"> <div class="page-content">
<textarea id="note_content" style="display: none;" data-noteid="{{noteid}}">{{content}}</textarea>
<textarea id="note_content" data-noteid="{{noteid}}">{{content}}</textarea>
<textarea id="orig_content" style="display: none;">{{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> </div>
<script src="js/editnote.js"></script> <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> </div>

66
www/pages/editor.html Normal file
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>