added MD editor to new post page
This commit is contained in:
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"?>
|
<?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
1
.idea/mdblog.iml
generated
|
|
@ -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" />
|
||||||
|
|
|
||||||
|
|
@ -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'),
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -2,6 +2,79 @@
|
||||||
{% block title %}
|
{% block title %}
|
||||||
Neuer Post
|
Neuer Post
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
{% block includehere %}
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
|
||||||
|
{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>Neuen Post erstellen</h1>
|
<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 %}
|
||||||
|
|
@ -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 %}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue