added MD editor to new post page
This commit is contained in:
CDaut
parent
3f62283c42
commit
f3297544f9
6 changed files with 89 additions and 15 deletions
2
.idea/jsLibraryMappings.xml
generated
2
.idea/jsLibraryMappings.xml
generated
|
|
@ -1,6 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<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>
|
||||
</project>
|
||||
1
.idea/mdblog.iml
generated
1
.idea/mdblog.iml
generated
|
|
@ -22,6 +22,7 @@
|
|||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
<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="simplemde" level="application" />
|
||||
</component>
|
||||
<component name="PyDocumentationSettings">
|
||||
<option name="format" value="PLAIN" />
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@ from django.urls import path
|
|||
|
||||
urlpatterns = [
|
||||
path('', viewblog),
|
||||
path('manage/add/', addpost),
|
||||
path('manage/add/', addpost, name='addpost'),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -12,25 +12,21 @@
|
|||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
|
||||
{% block includehere %} {% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<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 %}
|
||||
<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
|
||||
class="material-icons">admin_panel_settings</i>Admin
|
||||
panel</a></li>
|
||||
|
|
@ -60,5 +56,6 @@
|
|||
M.Sidenav.init(elems);
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,6 +2,79 @@
|
|||
{% block title %}
|
||||
Neuer Post
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<h1>Neuen Post erstellen</h1>
|
||||
{% block includehere %}
|
||||
<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 %}
|
||||
|
|
@ -2,6 +2,9 @@
|
|||
{% block title %}
|
||||
Willkommen!
|
||||
{% endblock %}
|
||||
{% block includehere %}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<h1>Willkommen!</h1>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue