django-quill-editor

⚠️ Warning

Content entered via django-quill-editor is marked as safe by Django using mark_safe. This makes the application vulnerable to Cross-Site Scripting (XSS) attacks if the content is not properly sanitized.

Recommendation: Only allow authorized administrators to use this editor in production environments.

To display the Quill editor in a template, ensure your view passes a form instance containing a QuillFormField to the template context. In the template, render the specific field using the form instance variable.

# views.py
from django.shortcuts import render
from .forms import QuillFieldForm

def form_view(request):
    return render(request, 'form_view.html', {'form': QuillFieldForm()})

# form_view.html
<form action="" method="POST">
    {% csrf_token %}
    {{ form.content }}
</form>

After installation, add django_quill to your INSTALLED_APPS list in settings.py to enable the editor functionality.

INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    'django_quill',
]

You can run the 'playground' application included in the repository to see a live demo. A Python virtual environment is required.

1. Clone the repository.
2. Navigate to the playground directory.
3. Install requirements from requirements.txt.
4. Run migrations and start the server.

# Clone repository
git clone git@github.com:LeeHanYeong/django-quill-editor.git

# Go to the playground package
cd django-quill-editor/playground

# Install requirements
pip install -r requirements.txt

# Run migrate and runserver
python manage.py migrate
python manage.py runserver

Once you have added a QuillField to your model, register that model in your app's admin.py file using the @admin.register decorator. The Quill editor interface will automatically be available in the Django admin interface for that model.

from django.contrib import admin
from .models import QuillPost

@admin.register(QuillPost)
class QuillPostAdmin(admin.ModelAdmin):
    pass

To display the Quill editor in a template, treat it like a normal Django form field. Render the field using {{ form.field_name }} within a standard HTML <form> tag. The QuillField will automatically provide the necessary components for the editor.

<!-- form_view.html -->
<form action="" method="POST">{% csrf_token %}
    {{ form.content }}
</form>

To use the Quill editor in your application, import QuillField from django_quill.fields and add it as a field to your Django model class. This field will store the Quill editor content.

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

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

To render the Quill editor, you must include its required CSS and JS files in the <head> of your HTML template. You can do this in one of two ways:

1. Using Form Media (Recommended): If you are using a Django Form that contains a QuillFormField, add {{ form.media }} to your <head> tag. This automatically handles the necessary assets for that specific form.
2. Using Template Include: If you want to include the assets globally or without a specific form instance, use the {% include %} tag with the django_quill/media.html path.

<!-- Option 1: Using form.media -->
<head>
    {{ form.media }}
</head>

<!-- Option 2: Using include tag -->
<head>
    {% include 'django_quill/media.html' %}
</head>

Install the package via pip. This package requires Python 3.7+ and Django 3.1+.

pip install django-quill-editor