Use Quill Editor In Django

I’ve been working as a Python developer, and one thing I always emphasize is choosing the right tools to enhance user experience. When it comes to adding rich text editing capabilities in Django applications, Quill Editor stands out as a modern, lightweight, and highly customizable option.

In this article, I’ll walk you through how to integrate Quill Editor in your Django project with practical examples. I’ll cover it all. This tutorial is tailored for developers in the USA who want a reliable and sleek rich text editor integrated quickly and efficiently.

Let’s get started!

Table of Contents

What is Quill Editor?

Quill is a powerful, open-source WYSIWYG (What You See Is What You Get) rich text editor built for the modern web. It offers a clean API, modular architecture, and is highly extensible. Unlike some bulky editors, Quill is lightweight and easy to customize, making it perfect for Django projects where performance and flexibility matter.

Read Delete Session Property in Django

Method 1: Integrate Quill Editor in Django Forms

This method is easy and works well if you want to add Quill Editor to any form in your Django app.

Step 1: Install Django and Create a Project

If you don’t have Django installed, run:

pip install django

Create a new Django project and app:

django-admin startproject myproject
cd myproject
python manage.py startapp myapp

Add myapp to your INSTALLED_APPS in settings.py.

Check out AttributeError: Module Object has no Attribute in Django

Step 2: Include Quill Editor Static Files

Download Quill from the official CDN or install via npm/yarn if you use frontend build tools. For simplicity, we’ll use the CDN.

Add the following to your template where the form will be rendered:

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Include Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

Step 3: Create a Django Form with a TextArea Widget

In forms.py of your app:

from django import forms

class ArticleForm(forms.Form):
    title = forms.CharField(max_length=200)
    content = forms.CharField(widget=forms.Textarea(attrs={'id': 'quill-editor'}))

Read Get User IP Address in Django

Step 4: Create a Template to Render the Form and Initialize Quill

In your template (e.g., templates/article_form.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Article</title>
    <!-- Quill CSS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
    <h1>Create New Article</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.title.label_tag }}<br>
        {{ form.title }}<br><br>

        <label for="quill-editor">Content:</label>
        <div id="quill-container" style="height: 200px;"></div>
        <input type="hidden" name="content" id="content-input">

        <br>
        <button type="submit">Submit</button>
    </form>

    <!-- Quill JS -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        // Initialize Quill editor
        var quill = new Quill('#quill-container', {
            theme: 'snow',
            placeholder: 'Write your article content here...',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'image']
                ]
            }
        });

        // On form submit, copy HTML content from Quill to hidden input
        document.querySelector('form').onsubmit = function() {
            var content = document.querySelector('input#content-input');
            content.value = quill.root.innerHTML;
        };
    </script>
</body>
</html>

Step 5: Handle Form Submission in Views

In views.py:

from django.shortcuts import render
from .forms import ArticleForm

def create_article(request):
    if request.method == 'POST':
        form = ArticleForm(request.POST)
        if form.is_valid():
            title = form.cleaned_data['title']
            content = form.cleaned_data['content']
            # Save the article to the database or process it
            # For demo, just return content back
            return render(request, 'article_success.html', {'title': title, 'content': content})
    else:
        form = ArticleForm()
    return render(request, 'article_form.html', {'form': form})

Create a simple success template article_success.html to display the saved content.

I executed the above example code and added the screenshot below.

Read Parse CSV in Python Django

Method 2: Use Quill Editor in Django Admin

If you want to enhance the Django admin interface with Quill, here’s how I do it.

Step 1: Create a Model with a TextField

In models.py:

from django.db import models

class BlogPost(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()

    def __str__(self):
        return self.title

Run migrations:

python manage.py makemigrations
python manage.py migrate

Check out Python Django Search With Dropdown Filter

Step 2: Customize Admin Form Widget

In admin.py:

from django.contrib import admin
from django import forms
from .models import BlogPost

class BlogPostAdminForm(forms.ModelForm):
    class Meta:
        model = BlogPost
        fields = '__all__'
        widgets = {
            'content': forms.Textarea(attrs={'id': 'quill-editor'}),
        }

class BlogPostAdmin(admin.ModelAdmin):
    form = BlogPostAdminForm

    class Media:
        css = {
            'all': ('https://cdn.quilljs.com/1.3.6/quill.snow.css',)
        }
        js = (
            'https://cdn.quilljs.com/1.3.6/quill.js',
            'admin/js/quill_init.js',  # We'll create this file next
        )

admin.site.register(BlogPost, BlogPostAdmin)

Step 3: Initialize Quill in Admin with JavaScript

Create a static JS file quill_init.js in your static files directory under admin/js/:

document.addEventListener('DOMContentLoaded', function() {
    var textarea = document.getElementById('id_content');
    if (!textarea) return;

    // Hide the original textarea
    textarea.style.display = 'none';

    // Create a div for Quill editor
    var quillDiv = document.createElement('div');
    quillDiv.id = 'quill-container';
    quillDiv.style.height = '300px';
    textarea.parentNode.insertBefore(quillDiv, textarea.nextSibling);

    // Initialize Quill
    var quill = new Quill('#quill-container', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'image']
            ]
        }
    });

    // Set initial content from textarea
    quill.root.innerHTML = textarea.value;

    // On form submit, update textarea with Quill content
    var form = textarea.closest('form');
    form.onsubmit = function() {
        textarea.value = quill.root.innerHTML;
    };
});

Make sure your static files are collected and served properly.

I executed the above example code and added the screenshot below.

Read Run Python Function by Clicking on HTML Button in Django

Tips from My Experience

Always sanitize HTML content on the server side before saving to prevent XSS attacks.
Use Quill’s modules to customize the toolbar according to your needs.
For production, consider bundling Quill and your JavaScript for better performance.
If your project requires image uploads, integrate Quill’s image handler with your backend.
Test your form submissions thoroughly to ensure the HTML content is saved and rendered correctly.

I hope you found this guide helpful. Adding Quill Editor to your Django projects will significantly improve content editing capabilities and user experience. If you have any questions or want to share your experience, feel free to leave a comment below.

Use Quill Editor in Django