added MD editor to new post page

This commit is contained in:
CDaut 2022-06-01 00:39:59 +02:00 committed by CDaut
parent 3f62283c42
commit f3297544f9
6 changed files with 89 additions and 15 deletions

View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="JavaScriptLibraryMappings"> <component name="JavaScriptLibraryMappings">
<file url="file://$PROJECT_DIR$" libraries="{jquery-3.6.0, jquery-3.6.0.slim}" /> <file url="file://$PROJECT_DIR$" libraries="{jquery-3.6.0, jquery-3.6.0.slim, simplemde}" />
</component> </component>
</project> </project>

1
.idea/mdblog.iml generated
View file

@ -22,6 +22,7 @@
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="jquery-3.6.0.slim" level="application" /> <orderEntry type="library" name="jquery-3.6.0.slim" level="application" />
<orderEntry type="library" name="jquery-3.6.0" level="application" /> <orderEntry type="library" name="jquery-3.6.0" level="application" />
<orderEntry type="library" name="simplemde" level="application" />
</component> </component>
<component name="PyDocumentationSettings"> <component name="PyDocumentationSettings">
<option name="format" value="PLAIN" /> <option name="format" value="PLAIN" />

View file

@ -3,5 +3,5 @@ from django.urls import path
urlpatterns = [ urlpatterns = [
path('', viewblog), path('', viewblog),
path('manage/add/', addpost), path('manage/add/', addpost, name='addpost'),
] ]

View file

@ -12,25 +12,21 @@
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
{% block includehere %} {% endblock %}
</head> </head>
<body> <body>
<header> <header>
<nav class="top-nav"> <nav class="top-nav">
<a href="#" data-target="slide-out" class="sidenav-trigger full hide-on-large-only"><i class="material-icons">menu</i></a> <a href="#" data-target="slide-out" class="sidenav-trigger full hide-on-large-only" id="open-sidenav-toggle">
<i class="material-icons">menu</i>
</a>
</nav> </nav>
<ul id="slide-out" class="sidenav sidenav-fixed"> <ul id="slide-out" class="sidenav sidenav-fixed">
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
<li>
<div class="divider"></div>
</li>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li><a class="waves-effect" href="{% url 'addpost' %}"><i class="material-icons">add</i>New post</a></li>
<li>
<div class="divider"></div>
</li>
<li><a class="waves-effect" href="{% url 'admin:index' %}"><i <li><a class="waves-effect" href="{% url 'admin:index' %}"><i
class="material-icons">admin_panel_settings</i>Admin class="material-icons">admin_panel_settings</i>Admin
panel</a></li> panel</a></li>
@ -60,5 +56,6 @@
M.Sidenav.init(elems); M.Sidenav.init(elems);
}); });
</script> </script>
{% block scripts %}{% endblock %}
</body> </body>
</html> </html>

View file

@ -2,6 +2,79 @@
{% block title %} {% block title %}
Neuer Post Neuer Post
{% endblock %} {% endblock %}
{% block content %} {% block includehere %}
<h1>Neuen Post erstellen</h1> <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
{% endblock %}
{% block content %}
<h3>Neuen Post erstellen</h3>
<div class="col s12">
<textarea>
</textarea>
</div>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
function autoCollapseSideNavFS(editor) {
SimpleMDE.toggleFullScreen(editor);
const sidenav = M.Sidenav.getInstance(document.getElementById("slide-out"));
if (editor.isFullscreenActive()) {
sidenav.close();
} else {
let toggle = document.getElementById("open-sidenav-toggle")
if (window.getComputedStyle(toggle).display === "none") {
sidenav.open();
}
}
}
function autoCollapseSideNavSbS(editor) {
SimpleMDE.toggleSideBySide(editor);
autoCollapseSideNavFS(editor);
}
const simplemde = new SimpleMDE({
autoDownloadFontAwesome: true,
autofocus: true,
spellChecker: false,
autosave: {
enabled: true,
uniqueId: "mainBlogEditor"
},
toolbar: [
"heading-3",
"heading-smaller",
"|",
"bold",
"italic",
"strikethrough",
"|",
"code",
"horizontal-rule",
"quote",
"unordered-list",
"ordered-list",
"link",
"image",
"table",
"|",
"preview",
{
name: "side-by-side",
className: "fa fa-columns no-disable no-mobile",
title: "Side by side",
action: autoCollapseSideNavSbS
},
{
name: "fullscreen",
className: "fa fa-arrows-alt no-disable no-mobile",
title: "fullscreen",
action: autoCollapseSideNavFS
}
]
});
</script>
{% endblock %} {% endblock %}

View file

@ -2,6 +2,9 @@
{% block title %} {% block title %}
Willkommen! Willkommen!
{% endblock %} {% endblock %}
{% block includehere %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
{% endblock %}
{% block content %} {% block content %}
<h1>Willkommen!</h1> <h1>Willkommen!</h1>
{% endblock %} {% endblock %}