Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a text editor field in Django?
Many online exam platforms and content management systems use rich text editors for text entries, image uploading, and formatted content creation. Quill is a popular WYSIWYG text editor that provides a Django model field to directly store rich content in the database without extra configuration.
In this article, we will see how to implement a rich text editor field in Django using django-quill-editor.
Installation and Setup
First, create a Django project and app with basic configuration. Install the django-quill-editor package ?
pip install django-quill-editor
In settings.py, add the required configuration ?
INSTALLED_APPS = [
'myapp.apps.MyappConfig', # your django app
'django_quill', # quill editor module
# other apps...
]
# Media files configuration
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Creating the Model
In models.py, create a model with QuillField for the text editor ?
from django.db import models
from django_quill.fields import QuillField
class Article(models.Model):
title = models.CharField(max_length=200)
author = models.CharField(max_length=100)
category = models.CharField(max_length=100)
tags = models.CharField(max_length=100)
content = QuillField(blank=True)
def __str__(self):
return self.title
Setting Up URLs
In the app's urls.py, configure the URL patterns ?
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from . import views
urlpatterns = [
path('', views.home, name="home"),
]
# Serve media files during development
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Creating Forms and Views
In views.py, create a form and view to handle the text editor ?
from django.shortcuts import render, redirect
from django import forms
from .models import Article
class ArticleForm(forms.ModelForm):
class Meta:
model = Article
fields = "__all__"
def home(request):
if request.method == "POST":
form = ArticleForm(request.POST)
if form.is_valid():
form.save()
return redirect('home')
else:
form = ArticleForm()
return render(request, 'home.html', {"form": form})
Creating the Template
Create a templates folder in your app directory and add home.html ?
<!DOCTYPE html>
<html>
<head>
{{ form.media }}
{% include 'django_quill/media.html' %}
<title>Django Quill Editor</title>
</head>
<body>
<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
<h1>Rich Text Editor Example</h1>
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" style="background: #007cba; color: white; padding: 10px 20px; border: none; cursor: pointer;">
Save Article
</button>
</form>
</div>
</body>
</html>
Running the Application
Run migrations to create the database table ?
python manage.py makemigrations python manage.py migrate python manage.py runserver
Key Features
| Feature | Description |
|---|---|
| Rich Text Formatting | Bold, italic, underline, headers |
| Lists | Ordered and unordered lists |
| Links | Insert and edit hyperlinks |
| Images | Upload and embed images |
| Code Blocks | Syntax highlighting for code |
Conclusion
Django Quill Editor provides an easy way to add rich text editing capabilities to your Django applications. The QuillField automatically handles content storage and retrieval, making it simple to implement professional text editing features without complex configuration.
2K+ Views
