orbit-oss/flask
4
5
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add SimpleMDE to blog edit pages

Browse source 
Integrate SimpleMDE editor into the blog create and update
pages to enhance the user experience with a WYSIWYG markdown
editor. This change includes adding the necessary CSS and JS
links to the templates and applying specific styles for both
light and dark modes in the stylesheet.

The SimpleMDE editor provides a more intuitive interface for
users to write and format their blog posts, addressing the
requirement outlined in the issue description. The changes
ensure that the editor is initialized on the textarea elements
for both creating and updating blog posts.

Related to Issue ID: FLAS-30
This commit is contained in:
Neo 2024-09-09 22:03:35 +00:00
parent c91d5733b1
commit 50d6984188
3 changed files with 31 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

21
flaskr/static/style.css
View file

@ -228,3 +228,24 @@ body.dark-mode .content textarea {
color: #e0e0e0;
border: 1px solid #555;
}
/* SimpleMDE specific styles */
.editor-toolbar {
background: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px 4px 0 0;
}
.CodeMirror {
border: 1px solid #ccc;
border-radius: 0 0 4px 4px;
}
body.dark-mode .editor-toolbar {
background: #333;
border: 1px solid #555;
}
body.dark-mode .CodeMirror {
border: 1px solid #555;
}

5
flaskr/templates/blog/create.html
View file

@ -12,4 +12,9 @@
<textarea name="body" id="body">{{ request.form['body'] }}</textarea>
<input type="submit" value="Save">
</form>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
var simplemde = new SimpleMDE({ element: document.getElementById("body") });
</script>
{% endblock %}

5
flaskr/templates/blog/update.html
View file

@ -12,6 +12,11 @@
<textarea name="body" id="body">{{ request.form['body'] or post['body'] }}</textarea>
<input type="submit" value="Save">
</form>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
var simplemde = new SimpleMDE({ element: document.getElementById("body") });
</script>
<hr>
<form action="{{ url_for('blog.delete', id=post['id']) }}" method="post">
<input class="danger" type="submit" value="Delete" onclick="return confirm('Are you sure?');">