1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
{% extends "base.html" %}
{% block content %}
<script src="{{ url_for('static', filename='bower_components/simplemde/dist/simplemde.min.js') }}">
</script>
<script src="{{ url_for('static', filename='bower_components/markdown-it/markdown-it.min.js') }}">
</script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',
filename='bower_components/simplemde/dist/simplemde.min.css') }}">
<h1>Write to yourself </h1>
<div class="tab">
<button type="button" class="tablinks" id="defaultOpen" onclick="openTab(event, 'input-area')">Editor</button>
<button type="button" class="tablinks" onclick="openTab(event, 'document-rendered')">Preview</button>
</div>
<!-- Textarea for Markdown input -->
<div id="input-area" class="tabcontent">
<form method="post" novalidate>
{{ form.hidden_tag() }}
<label for="faccets"> {{form.faccets.label}} </label>
{{form.faccets|safe}}
<p>
{{form.title.label}}: {{form.title}} <br>
{{ form.content.label }}<br>
{{ form.content(cols="80", rows="24") }}
</p>
<p>
Markdown is fully supported<br>
{% for error in form.content.errors %}
<span style="color: peru;">[{{ error }}]</span>
{% endfor %}
</p>
<p>{{ form.submit() }}</p>
</form>
<div class="tools">
<a href="#">Use The Advanced Editor</a>
<menu>
<li><button id="activate" onclick="activeAdvanced()">Advanced</button></li>
<li><button id="kill" onclick="killAdvanced()">Basic</button></li>
</menu>
</div>
</div>
<!-- Div to display rendered Markdown -->
<div id="document-rendered" class="tabcontent"></div>
<script>
// Initialize markdown-it
const md = window.markdownit();
var simplemde = null;
// Function to render Markdown
function renderMarkdown() {
const markdownInput = document.getElementById('body').value;
const html = md.render(markdownInput);
document.getElementById('document-rendered').innerHTML = html;
}
function openTab(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
function activeAdvanced() {
if (simplemde == null) {
simplemde = new SimpleMDE({
element: document.getElementById("content")
});
simplemde.codemirror.on("change", function () {
const mdIn = simplemde.value();
var ourHtml = md.render(mdIn);
document.getElementById('document-rendered').innerHTML = ourHtml;
});
}
}
function killAdvanced() {
if (simplemde != null) {
simplemde.toTextArea();
simplemde = null;
document.getElementById('document-input').addEventListener('input', renderMarkdown);
}
}
// Render Markdown on initial load
document.getElementById('defaultOpen').click();
renderMarkdown();
document.getElementById('document-input').addEventListener('input', renderMarkdown);
</script>
{% endblock %}
|
