Django and Simple MDE Markdown Editor By Conor Cunningham

See also

• https://blog.conorcunningham.net/post/django-and-simeple-mde-markdown-editor/

• https://twitter.com/cunningtek/status/1233123660447277057?s=20

• https://twitter.com/cunningtek

• SimpleMD

https://twitter.com/cunningtek/status/1233123660447277057?s=20

Contents

• Django and Simple MDE Markdown Editor By Conor Cunningham

  • Introduction

  • The Quick fix

  • A Model

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

 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.