techtalk/template/edit_group_post.html

67 lines
1.9 KiB
HTML
Raw Normal View History

2024-09-20 17:13:19 +02:00
{% extends "base.html" %}
{% block title %}Edit Post in {{ group.name }}{% endblock %}
{% block content %}
<h1 class="mb-4">Edit Post in {{ group.name }}</h1>
<form method="POST" id="editGroupPostForm">
<div class="mb-3">
<label for="content" class="form-label">Content</label>
<textarea class="form-control" id="content" name="content" rows="10">{{ post.original_content }}</textarea>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary">Update Post</button>
<a href="{{ url_for('group_detail', vanity_url=group.vanity_url) }}" class="btn btn-secondary">Cancel</a>
</div>
</form>
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>
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"
],
status: false
});
document.getElementById('editGroupPostForm').addEventListener('submit', function(e) {
document.getElementById('content').value = easyMDE.value();
});
</script>
{% 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;
}
.editor-toolbar button {
color: #fff !important;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
background-color: #555;
}
.CodeMirror-cursor {
border-left: 1px solid #fff;
}
</style>
{% endblock %}