How to add a markdown editor to our Django project

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.

Join course for $15

Modified files

templates/app/article_update.html

--- 
+++ 
@@ -12,4 +12,16 @@

   <a href="{% url 'home' %}">Back to list</a>
   <a href="{% url 'delete_article' article.id %}">Delete article</a>
-{% endblock content %}+{% endblock content %}
+
+{% block page_js %}
+<script>
+const contentMarkdown = new EasyMDE({
+  element: document.getElementById("id_content"),
+  spellChecker: false,
+  status: false,
+  toolbar: false,
+  forceSync: true
+});
+</script>
+{% endblock page_js %}

templates/app/base.html

--- 
+++ 
@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Djangocourse</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
 </head>
 <body>
   <nav>
@@ -25,5 +27,8 @@

   {% endblock content %}
   <footer>Common footer for all templates</footer>
+  {% block page_js %}
+
+  {% endblock page_js %}
 </body>
 </html>

templates/app/article_create.html

--- 
+++ 
@@ -9,4 +9,16 @@
   </form>

   <a href="{% url 'home' %}">Back to list</a>
-{% endblock content %}+{% endblock content %}
+
+{% block page_js %}
+<script>
+const contentMarkdown = new EasyMDE({
+  element: document.getElementById("id_content"),
+  spellChecker: false,
+  status: false,
+  toolbar: false,
+  forceSync: true
+});
+</script>
+{% endblock page_js %}

More article features and markdown editor

How to add a markdown editor to our Django project

Want more?

Modified files