.. _conor:

================================================================================================
**Django and Simple MDE Markdown Editor** By Conor Cunningham
================================================================================================

.. seealso::

   - https://blog.conorcunningham.net/post/django-and-simeple-mde-markdown-editor/
   - https://twitter.com/cunningtek/status/1233123660447277057?s=20
   - https://twitter.com/cunningtek
   - :ref:`SimpleMD <simplemde>`

.. figure:: article_2020_02_27.png
   :align: center
   
   https://twitter.com/cunningtek/status/1233123660447277057?s=20
   

.. contents::
   :depth: 3


Introduction
=============

Adding a simple markdown editor to a Django web app is quite straightforward. 

In this example, I am going to use SimpleMDE, a lightweight javascript editor. 

Before going on, I should point out that I found the solution to a problem 
I faced from a post by Viktor Freitas. 
Victor's post goes into quite a lot of detail about getting a Django 
blog up and running, whereas this post just focuses on the specfics 
of getting SimpleMDE working with your blog.

The Quick fix
===============

If you're not fussed on reading this, and just want to know why your 
Django form is not submitting with SimpleMDE (this is the problem I faced) 
or some other javascript, add the following to your form to prevent your 
browser from validating input data.

::

    <form method="POST" novalidate>

If you wish to see how it is all put together, then please read on.


A Model
===========

First things first, we need a model. 

This article isn't about models, but for the sake of clarity, I'll show 
a Post model here, as it is ultimately the thing we wish to create with 
out markdown editor

.. code-block:: python
   :linenos:
   
    class Post(models.Model):
        title = models.CharField(max_length=100)
        content = models.TextField()
        date_posted = models.DateTimeField(default=timezone.now)
        last_modified = models.DateTimeField(auto_now=True)
        author = models.ForeignKey('users.CustomUser', on_delete=models.CASCADE)
        slug = models.SlugField(null=False, unique=True)

The important thing to note here is that the Post's content is a 
models.TextField() type. 

This is relevant when Django renders the form for us.