Skip to main content

Integrate Quill editor with Django project.

Project description


PyPI version Documentation Status

django-quill-editor makes Quill.js easy to use on Django Forms and admin sites

  • No configuration required for static files!
  • The entire code for inserting WYSIWYG editor is less than 30 lines
  • It can be used in both admin and Django views



  • Install django-quill-editor to your Python environment

    pip install django-quill-editor
  • Add django_quill to INSTALLED_APPS in


Run Sample project

Repo: django-quill-editor-sample

# Clone repo
git clone
cd django-quill-editor-sample

# Create virtualenv (I used pyenv, but you can use other methods)
pyenv virtualenv 3.7.5 django-quill
pyenv local django-quill

# Install Python packages
pip install -r requirements.txt
python app/ runserver


Documentation for django-quill-editor is located at

Change toolbar configs


        'theme': 'snow',
        'modules': {
            'syntax': True,
            'toolbar': [
                    {'font': []},
                    {'header': []},
                    {'align': []},
                    'bold', 'italic', 'underline', 'strike', 'blockquote',
                    {'color': []},
                    {'background': []},
                ['code-block', 'link'],


Add QuillField to the Model class you want to use

from django.db import models
from django_quill.fields import QuillField

class QuillPost(models.Model):
    content = QuillField()

1. Django admin

Just register the Model in of the app.

from django.contrib import admin
from .models import QuillPost

class QuillPostAdmin(admin.ModelAdmin):


2. Form

  • Add QuillFormField to the Form class you want to use

  • There are two ways to add CSS and JS files to a template.

    • If there is a Form with QuillField added, add {{ }} to the <head> tag.

          {{ }}
    • Or, import CSS and JS files directly using {% include %} template tags.

          <!-- django-quill-editor Media -->
          {% include 'django_quill/media.html' %}
from django import forms
from django_quill.forms import QuillFormField

class QuillFieldForm(forms.Form):
    content = QuillFormField()
from django.shortcuts import render
from .forms import QuillFieldForm

def form(request):
    return render(request, 'form.html', {'form': QuillFieldForm()})
<!-- Template -->
<form action="" method="POST">{% csrf_token %}
    {{ form.content }}

3. ModelForm

Just define and use ModelForm of Model class

from django import forms
from .models import QuillPost

class QuillPostForm(forms.ModelForm):
    class Meta:
        model = QuillPost
        fields = (
from django.shortcuts import render
from .forms import QuillPostForm

def model_form(request):
    return render(request, 'model_form.html', {'form': QuillPostForm()})
<!-- Template -->
<form action="" method="POST">{% csrf_token %}
    {{ form.content }}

Form, ModelForm's Output:



As an open source project, we welcome contributions. The code lives on GitHub

Distribution (for owners)

PyPI Release

poetry install  # Install PyPI distribution packages

Sphinx docs

brew install sphinx-doc  # macOS


cd docs
make html
# ...
# The HTML pages are in _build/html.

cd _build/html
python -m http.server 3001

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-quill-editor-0.1.16.tar.gz (8.1 kB view hashes)

Uploaded source

Built Distribution

django_quill_editor-0.1.16-py3-none-any.whl (463.8 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page