Providing a rich, engaging content creation experience for your users often requires a WYSIWYG (What You See Is What You Get) editor. While integrating a powerful JavaScript library like Quill.js can be complex, the django-quill-editor package abstracts this complexity, allowing for seamless integration into your Django project's admin panel and custom forms.
Why Choose django-quill-editor?
django-quill-editor simplifies the process by wrapping the modern and modular Quill.js editor into a reusable Django field and widget.
- Zero-Config Static Files: The package handles all the necessary CSS and JavaScript, meaning no extra configuration is required for static files.
- Simple Model Integration: Adding rich text editing is as easy as changing a field type in your model.
- Admin and Form Compatibility: It works effortlessly within the Django admin and can be readily used in any custom Django Form or ModelForm.
Getting Started: Installation and Setup
Integrating the editor is a quick, three-step process.
1. Installation
Install the package using pip:
pip install django-quill-editor
2. Configuration
Add django_quill to your INSTALLED_APPS in your project's settings.py:
# settings.py
INSTALLED_APPS = [
# ... other apps
'django.contrib.admin',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# Add django-quill-editor
'django_quill',
]
3. Model Definition
Replace a standard TextField or CharField with the QuillField in your model.
# my_app/models.py
from django.db import models
from django_quill.fields import QuillField
class BlogPost(models.Model):
title = models.CharField(max_length=255)
# Use QuillField for rich content
content = QuillField()
def __str__(self):
return self.title
After updating your model, remember to run migrations:
python manage.py makemigrations
python manage.py migrate
Usage in Admin and Forms
The editor will appear automatically wherever a QuillField is used.
Admin Integration
Simply register your model in admin.py, and the content field will be rendered with the Quill editor, ready for rich text input.
# my_app/admin.py
from django.contrib import admin
from .models import BlogPost
@admin.register(BlogPost)
class BlogPostAdmin(admin.ModelAdmin):
# No custom widget needed! QuillField handles it.
pass
Displaying Content in Templates
When retrieving the content from the database, the QuillField instance provides a handy .html property which returns the rendered rich content. Crucially, you must use the |safe filter in your template to render the HTML content instead of escaping it as plain text.
# In your view:
def post_detail(request, pk):
post = BlogPost.objects.get(pk=pk)
return render(request, 'post_detail.html', {'post': post})
# In post_detail.html:
<h1>{{ post.title }}</h1>
<div class="post-content">
{# The .html property contains the rendered HTML; use |safe to display it #}
{{ post.content.html|safe }}
</div>
Advanced Customization: The Toolbar
A key feature of Quill.js is its modularity, and django-quill-editor allows you to customize the toolbar configuration globally via your settings.py. This lets you specify which formatting options (bold, lists, code blocks, etc.) are available to the user.
To set a custom toolbar, define a QUILL_CONFIGS dictionary in settings.py. Here's an example that provides a basic, focused set of tools:
# settings.py
QUILL_CONFIGS = {
'default': {
'theme': 'snow',
'modules': {
'toolbar': [
[{'header': [1, 2, 3, False]}],
['bold', 'italic', 'underline'],
[{'list': 'ordered'}, {'list': 'bullet'}],
['link', 'blockquote', 'code-block'],
['clean']
]
}
},
'simple': {
'theme': 'snow',
'modules': {
'toolbar': [
['bold', 'italic', 'underline', 'link']
]
}
}
}
You can then apply a specific configuration to a QuillField in your model:
# my_app/models.py
from django.db import models
from django_quill.fields import QuillField
class ShortComment(models.Model):
# Apply the 'simple' configuration
content = QuillField(config='simple')
By using django-quill-editor, you can dramatically upgrade your content editing capabilities in Django with minimal effort, offering a modern and feature-rich experience powered by Quill.js.
This YouTube tutorial is a good place to start for developers looking to see the integration of the Quill Editor in a Django project step-by-step: Django Quill Editor Tutorial: Adding Rich Text Editing to Your Project.
0 Comments