Integrate Quill editor with Django project.

Project description

django-quill-editor

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

django-quill-editor

Setup

Install django-quill-editor to your Python environment
```
pip install django-quill-editor
```

Add django_quill to INSTALLED_APPS in settings.py

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    'django_quill',
]

Run Sample project

Repo: django-quill-editor-sample

# Clone repo
git clone https://github.com/LeeHanYeong/django-quill-editor-sample
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/manage.py runserver

Documentation

Documentation for django-quill-editor is located at https://django-quill-editor.readthedocs.io/

Change toolbar menus

Add QUILL_CONFIGS to the settings.py

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

Usage

Add QuillField to the Model class you want to use

# models.py
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 admin.py of the app.

from django.contrib import admin
from .models import QuillPost

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

admin-sample

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 {{ form.media }} to the <head> tag.
```
<head>
    {{ form.media }}
</head>
```
- Or, import CSS and JS files directly using {% include %} template tags.
```
<head>
    
    {% include 'django_quill/media.html' %}
</head>
```

# forms.py
from django import forms
from django_quill.forms import QuillFormField

class QuillFieldForm(forms.Form):
    content = QuillFormField()

# views.py
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 }}
</form>

3. ModelForm

Just define and use ModelForm of Model class

# forms.py
from django import forms
from .models import QuillPost

class QuillPostForm(forms.ModelForm):
    class Meta:
        model = QuillPost
        fields = (
            'content',
        )

# views.py
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>

Form, ModelForm's Output:

form-sample

Contributing

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

Project details

Release history Release notifications | RSS feed

0.1.40

Feb 8, 2022

0.1.39

Feb 8, 2022

0.1.38

Jan 27, 2022

0.1.37

Jan 20, 2022

0.1.36

Jan 13, 2022

0.1.35

Jan 13, 2022

0.1.34

Jan 4, 2022

0.1.33

Dec 30, 2021

0.1.31

Dec 30, 2021

0.1.30

Dec 30, 2021

0.1.29

Dec 15, 2021

0.1.28

Dec 14, 2021

0.1.27

Dec 14, 2021

0.1.26

Dec 7, 2021

0.1.25

Dec 7, 2021

0.1.24

Dec 6, 2021

0.1.23

Dec 6, 2021

0.1.22

Mar 23, 2021

0.1.21

Feb 27, 2021

0.1.19

Feb 10, 2021

0.1.18

Feb 9, 2021

0.1.16

Aug 20, 2020

0.1.15

Aug 13, 2020

0.1.14

Aug 4, 2020

This version

0.1.13

Aug 4, 2020

0.1.12

Jun 25, 2020

0.1.11

Jun 25, 2020

0.1.10

Jun 9, 2020

0.1.9

Jun 9, 2020

0.1.8

Jun 9, 2020

0.1.7

Jun 9, 2020

0.1.6

Jun 9, 2020

0.1.5

Mar 20, 2020

0.1.4

Mar 19, 2020

0.1.3

Mar 17, 2020

0.1.2

Mar 5, 2020

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.13.tar.gz (8.0 kB view hashes)

Uploaded Aug 4, 2020 source

Built Distribution

django_quill_editor-0.1.13-py3-none-any.whl (11.6 kB view hashes)

Uploaded Aug 4, 2020 py3

Hashes for django-quill-editor-0.1.13.tar.gz

Hashes for django-quill-editor-0.1.13.tar.gz
Algorithm	Hash digest
SHA256	`0a23faa4e01c51b37879a8d9151f65e1d8e9bd9c2740e3b9957124ac6338545d`
MD5	`ac6801d4be5b9e83b3f12d9e04454374`
BLAKE2-256	`0d815cdbd50e95c1a96c90e060ddee30d0a2527f04197ab583853d1ef73f463e`

Hashes for django_quill_editor-0.1.13-py3-none-any.whl

Hashes for django_quill_editor-0.1.13-py3-none-any.whl
Algorithm	Hash digest
SHA256	`472b579161a9914b42f5ea560c5c48ef20d74f8a5f6bed2d979ea6b7fd3acd69`
MD5	`08eb44d17302dae54609ba96431050f8`
BLAKE2-256	`08e2d66f04b94102a7571aef026be273bccaed8b3a650c2dcdba259f83c80406`