In this tutorial, you will learn how to use Quill (a rich text editor) in your Django web application.
1. Install django-quill-editor and configure your project
You can find the GitHub repertory of the project here: https://github.com/openescuela/opsatipstutos/tree/main/tips4-quill
In this example, the project is named mysite and the application is named blogs.
Open your terminal and go to the repertory of your Django project, active the virtual environment, and install django-quill-editor
$ pip install django-quill-editor
Add Quill to the installed apps
mysite/settings.py
.
.
.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blogs',
'django_quill',
]
.
.
.
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Add the URLs of the Blogs app to the urlpatterns of the project.
mysite/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
path('', include("blogs.urls")),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
2. Add Quill text editor for a model on the admin page
blogs/modes.py
from django.db import models
from django_quill.fields import QuillField
class Project(models.Model):
name = models.CharField(max_length=50)
content = QuillField(default='ici')
def __str__(self):
return self.name
blogs/views.py
from django.shortcuts import render
from .models import Project
def index(request):
projects = Project.objects.all()
return render(request, 'blogs/index.html',{'projects':projects})
blogs/urls.py
from . import views
from django.urls import path
app_name = 'blogs'
urlpatterns = [
path('', views.index, name='index'),
]
blogs/admin.py
from django.contrib import admin
from .models import Project
admin.site.register(Project)
blogs/templates/blogs/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<h1> This is my blog </h1>
{% for project in projects %}
{{project.name}}
{{project.content.html|safe}}
{% endfor %}
</div>
</body>
</html>
Run migration, run the server, go to the admin page, add some projects and go to the browser with the localhost to show the results.
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
3. Add Quill text editor for user interface
blogs/forms.py
from django_quill.forms import QuillFormField
from django import forms
from .models import Project
# Using as Form
class ProjectForm(forms.Form):
body = QuillFormField()
# Using as ModelForm
class ProjectSecondForm(forms.ModelForm):
class Meta:
model = Project
fields = ('name', 'content',)
blogs/views.py
from django.shortcuts import render
from .models import Project
from .forms import ProjectForm, ProjectSecondForm
def index(request):
projects = Project.objects.all()
form = ProjectForm()
secondform = ProjectSecondForm
return render(request, 'blogs/index.html',{'projects':projects,
'form':form,
'secondform':secondform})
blogs/templates/blogs/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> This is my blog </h1>
{% for project in projects %}
<h2>{{project.name}}</h2>
{{project.content.html|safe}}
{% endfor %}
<h2> First Form</h2>
<form class="" action="index.html" method="post">
{{form.media}}
{{form.as_p}}
</form>
<h2> Second Form</h2>
<form class="" action="index.html" method="post">
{{secondform.media}}
{{secondform.as_p}}
</form>
</body>
</html>
Run your server and go to your browser with the localhost.
4. Add a personalized configuration
mysite/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'],
]
}
}
}
0 comment