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
Setup
-
Install
django-quill-editorto your Python environmentpip install django-quill-editor
-
Add
django_quilltoINSTALLED_APPSinsettings.py# settings.py INSTALLED_APPS = [ 'django.contrib.admin', ... 'django_quill', ]
Run Sample project
# Clone repo, move to sample project
git clone https://github.com/LeeHanYeong/django-quill-editor
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
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
2. Form
-
Add
QuillFormFieldto 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, directly import the necessary CSS and JS files (highlight.pack.js must be imported first!)
<head> <!-- highlight.js --> <link href="{% static 'django_quill/highlight.darcula.min.css' %}" rel="stylesheet"> <script src="{% static 'django_quill/highlight.pack.js' %}"></script> <!-- django-quill-editor --> <link href="{% static 'django_quill/quill.snow.css' %}" rel="stylesheet"> <script src="{% static 'django_quill/quill.js' %}"></script> <script src="{% static 'django_quill/django_quill.js' %}"></script> </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:
Contributing
As an open source project, we welcome contributions. The code lives on GitHub
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-quill-editor-0.1.3.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 14ba012dd85f973a43c9622cb67082e201fe08fcffbf088c2066b32b48920714 |
|
| MD5 | 4aa78c24aef3985cfb9f437e4e0816b7 |
|
| BLAKE2b-256 | d430d0a9832c7deb5a2cf3e41270d5dbaf73c7a146cca12636ca93e10101841c |
Hashes for django_quill_editor-0.1.3-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 3c4bb5c6495793a8731cece69fe46751b2b83d36b995f40ddae852fadd947e5b |
|
| MD5 | 07479d9318f4b5566406f7dec65ed043 |
|
| BLAKE2b-256 | bfe7ec699a244e24a53354bee6044095ad59aef9306a8d33356d124f4ba383f7 |
