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-editor
to your Python environmentpip install django-quill-editor
-
Add
django_quill
toINSTALLED_APPS
insettings.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
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> <!-- django-quill-editor Media --> {% 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:
Contributing
As an open source project, we welcome contributions. The code lives on GitHub
Project details
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.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
Algorithm | Hash digest | |
---|---|---|
SHA256 | 472b579161a9914b42f5ea560c5c48ef20d74f8a5f6bed2d979ea6b7fd3acd69 |
|
MD5 | 08eb44d17302dae54609ba96431050f8 |
|
BLAKE2-256 | 08e2d66f04b94102a7571aef026be273bccaed8b3a650c2dcdba259f83c80406 |