123 lines
3.9 KiB
HTML
123 lines
3.9 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Edit Post{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<h1 class="mb-4">Edit Post</h1>
|
||
|
|
<form method="POST" id="editPostForm">
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="content" class="form-label">Content</label>
|
||
|
|
<textarea class="form-control" id="content" name="content" rows="10"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<button type="submit" class="btn btn-primary">Update Post</button>
|
||
|
|
<button type="submit" name="delete" value="1" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this post?');">Delete Post</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block styles %}
|
||
|
|
{{ super() }}
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
|
||
|
|
<style>
|
||
|
|
.EasyMDEContainer {
|
||
|
|
background-color: #333;
|
||
|
|
}
|
||
|
|
.EasyMDEContainer .CodeMirror {
|
||
|
|
color: #fff;
|
||
|
|
background-color: #333;
|
||
|
|
}
|
||
|
|
.editor-toolbar {
|
||
|
|
background-color: #444;
|
||
|
|
border-color: #555;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
.editor-toolbar button {
|
||
|
|
color: #fff !important;
|
||
|
|
margin: 0 1px;
|
||
|
|
}
|
||
|
|
.editor-toolbar button:hover,
|
||
|
|
.editor-toolbar button.active {
|
||
|
|
background-color: #555;
|
||
|
|
}
|
||
|
|
.CodeMirror-cursor {
|
||
|
|
border-left: 1px solid #fff;
|
||
|
|
}
|
||
|
|
.separator {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
{{ super() }}
|
||
|
|
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
var easyMDE = new EasyMDE({
|
||
|
|
element: document.getElementById('content'),
|
||
|
|
spellChecker: false,
|
||
|
|
autofocus: true,
|
||
|
|
lineWrapping: true,
|
||
|
|
toolbar: [
|
||
|
|
"bold", "italic", "heading", "quote", "unordered-list", "ordered-list",
|
||
|
|
"link", "code", "table", "undo", "redo",
|
||
|
|
{
|
||
|
|
name: "custom-h1",
|
||
|
|
action: function(editor){
|
||
|
|
var cm = editor.codemirror;
|
||
|
|
var output = '';
|
||
|
|
var selectedText = cm.getSelection();
|
||
|
|
output = '# ' + selectedText;
|
||
|
|
cm.replaceSelection(output);
|
||
|
|
},
|
||
|
|
className: "fa fa-header",
|
||
|
|
title: "Custom H1",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "custom-h2",
|
||
|
|
action: function(editor){
|
||
|
|
var cm = editor.codemirror;
|
||
|
|
var output = '';
|
||
|
|
var selectedText = cm.getSelection();
|
||
|
|
output = '## ' + selectedText;
|
||
|
|
cm.replaceSelection(output);
|
||
|
|
},
|
||
|
|
className: "fa fa-header",
|
||
|
|
title: "Custom H2",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "custom-p",
|
||
|
|
action: function(editor){
|
||
|
|
var cm = editor.codemirror;
|
||
|
|
var output = '';
|
||
|
|
var selectedText = cm.getSelection();
|
||
|
|
var color = prompt("Enter color (e.g., red, #ff0000):");
|
||
|
|
if (color) {
|
||
|
|
output = '<p style="color: ' + color + ';">' + selectedText + '</p>';
|
||
|
|
cm.replaceSelection(output);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
className: "fa fa-paragraph",
|
||
|
|
title: "Custom Paragraph",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
status: false,
|
||
|
|
initialValue: {{ post.original_content|tojson|safe }},
|
||
|
|
inputStyle: 'textarea'
|
||
|
|
});
|
||
|
|
|
||
|
|
// Force mobile keyboard to show up
|
||
|
|
easyMDE.codemirror.getInputField().addEventListener('touchstart', function(e) {
|
||
|
|
e.target.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('editPostForm').addEventListener('submit', function(e) {
|
||
|
|
document.getElementById('content').value = easyMDE.value();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|