71 lines
1.9 KiB
Plaintext
71 lines
1.9 KiB
Plaintext
{% extends "base" %}
|
|
|
|
{% block extracss %}
|
|
<style>
|
|
div.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
div.editable form {
|
|
height: 100%;
|
|
}
|
|
|
|
div.editable input#title {
|
|
width: 76%;
|
|
margin: 10px 10px 10px 0;
|
|
}
|
|
|
|
div.editable textarea {
|
|
width: 95%;
|
|
height: 85%;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
{% endblock extracss %}
|
|
|
|
{% block content %}
|
|
<div class="editable">
|
|
<form action="" method="post">
|
|
<input id="title" name="title" type="text"/>
|
|
<label for="">Visible</label>
|
|
<input name="published" type="checkbox" value="true"/>
|
|
<textarea id="content" name="content"></textarea>
|
|
<input name="views" type="number" value="0" style="display: none"/>
|
|
<button>Publicar</button>
|
|
</form>
|
|
</div>
|
|
<div id="preview" class="preview">
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block extrajs %}
|
|
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
|
|
<script>
|
|
function delay(fn, ms) {
|
|
let timer = 0
|
|
return function(...args) {
|
|
clearTimeout(timer)
|
|
timer = setTimeout(fn.bind(this, ...args), ms || 0)
|
|
}
|
|
}
|
|
|
|
let converter = new showdown.Converter({
|
|
parseImgDimensions: true,
|
|
strikethrough: true,
|
|
tables: true,
|
|
tasklists: true,
|
|
emoji: true
|
|
});
|
|
document.getElementById("content").addEventListener("keyup", delay(() => {
|
|
let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
|
|
document.getElementById("preview").innerHTML = converter.makeHtml(text);
|
|
}, 500));
|
|
|
|
document.getElementById("title").addEventListener("keyup", delay(() => {
|
|
let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
|
|
document.getElementById("preview").innerHTML = converter.makeHtml(text);
|
|
}, 500));
|
|
</script>
|
|
{% endblock extrajs %}
|