If you’re using Django and want to add a Markdown editor to your forms, tools like EasyMDE or SimpleMDE make it easy to provide a user-friendly interface for writing Markdown content. In this tutorial, we’ll walk through the process of integrating EasyMDE as the Markdown editor for a form field in Django. Adding SimpleMDE is a similar process. Let’s get started!
Step 1: Define the Django Model
Let’s assume you have a model called Post that includes a content field where users can write Markdown text.
Here’s what the Post model might look like:
# models.py from django.db import models class Post(models.Model): content = models.TextField() created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True)
The content field is a TextField, which we’ll configure to accept Markdown text.
Step 2: Create a Django Form
Next, create a PostForm to represent this model in a form. We’ll define a widget for the content field to give it a CSS class and an id so that it’s easy to access in JavaScript:
# forms.py from django import forms from .models import Post class PostForm(forms.ModelForm): class Meta: model = Post fields = ["content"] widgets = { "content": forms.Textarea(attrs={"class": "form-control", "id": "id_content"}), }
This form setup ensures that the content field will have the id attribute id_content, which we’ll use to initialize EasyMDE in our HTML template.
Step 3: Add EasyMDE to Your Template
EasyMDE can be added to your template via CDN, making the setup fast and straightforward. Here’s how:
Include EasyMDE in Your HTML Template
To add the EasyMDE library, include the following <link> and <script> tags in your template’s <head> section.Initialize EasyMDE
After the form is rendered, initialize EasyMDE for the content field by referencing the id we set earlier.
Here’s the complete template:
<!-- post_form.html --> {% extends 'base.html' %} {% load static %} {% block title %} Edit Post {% endblock %} {% block extra_css %} <!-- Include EasyMDE CSS and JavaScript via CDN --> <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> {% endblock %} {% block content %} <div class="container"> <form method="post"> {% csrf_token %} <!-- Render each form field --> {% for field in form %} <div class="mb-3"> {{ field.label_tag }} {{ field }} {% if field.errors %} <div class="text-danger">{{ field.errors }}</div> {% endif %} </div> {% endfor %} <!-- Submit button --> <button class="btn btn-primary m-3" type="submit">Save</button> </form> </div> <!-- Initialize EasyMDE --> <script> var easyMDE = new EasyMDE({ element: document.getElementById('id_content') }); </script> {% endblock %}
Here’s what’s happening in this template:
Loading EasyMDE: The EasyMDE CSS and JavaScript are added within the extra_css block to keep things organized. This block will extend from the <head> section of base.html.
Setting Up EasyMDE: At the bottom of the page, after the form has been rendered, we initialize EasyMDE by creating a new instance and specifying element: document.getElementById('id_content'). This connects EasyMDE to our content field in the form.
Step 4: Configure base.html
Make sure you have an extra_css block defined in your base.html file. This is where your CSS and script tags from extra_css will load.
<!-- base.html --> <!DOCTYPE html> <html lang="en"> <head> <title>{% block title %}My Site{% endblock %}</title> {% block extra_css %}{% endblock %} </head> <body> {% block content %}{% endblock %} </body> </html>
And That’s It!
Now, when users open the post_form.html page, they’ll see an EasyMDE Markdown editor for the content field. This editor provides a simple, user-friendly interface that includes Markdown formatting options, live preview, and more.
By following these steps, you can easily integrate a Markdown editor
into your Django forms, making it easy for users to write and format
Markdown content.