django-prose
django-prose copied to clipboard
Wonderful rich-text editing for your Django project
Django Prose
Django Prose provides your Django applications with wonderful rich-text editing capabilities.
Requirements
- Python 3.8 or later
- Django 3.2 or later
- Bleach 4.0 or later
Getting started
To get started with Django Prose, all you need to do is follow just four steps.
-
Install
django-prose
We use and suggest using Poetry, although Pipenv and plain pip will work seamlessly as well
poetry add django-prose
-
Add to
INSTALLED_APPS
Add
prose
in your Django project's installed apps (example:example/example/settings.py
):INSTALLED_APPS = [ # Django stock apps (e.g. 'django.contrib.admin') 'prose', # your application's apps ]
-
Run migrations
This is required so you can use Django Prose's built-in Document model:
python manage.py migrate prose
-
Include URLs
You need to edit the main
urls.py
file of your Django project and includeprose.urls
:urlpatterns = [ path('admin/', admin.site.urls), # other urls ... path("prose/", include("prose.urls")), ]
Now, you are ready to go 🚀.
Usage
There are different ways to use Django prose according to your needs. We will examine all of them here.
Rendering rich-text in templates
Rich text content essentially is HTML. For this reason it needs to be manually marked as safe
, when rendered in Django templates. Example:
{{ document.content | safe}}
Small rich-text content
You might want to add rich-text content in a model that is just a few characters (e.g. 140), like an excerpt from an article. In that case we suggest using the RichTextField
. Example:
from django.db import models
from prose.fields import RichTextField
class Article(models.Model):
excerpt = RichTextField()
As mentioned above, you need to mark the article excerpt as safe
, in order to render it:
<div class="article-excerpt">{{ article.excerpt | safe}}</div>
Large rich-text content
In case you want to store large rich-text content, like the body of an article, which can span to quite a few thousand characters, we suggest you use the AbstractDocument
model. This will save large rich-text content in a separate database table, which is better for performance. Example:
from django.db import models
from prose.fields import RichTextField
from prose.models import AbstractDocument
class ArticleContent(AbstractDocument):
pass
class Article(models.Model):
excerpt = RichTextField()
body = models.OneToOneField(ArticleContent, on_delete=models.CASCADE)
Similarly here as well, you need to mark the article's body as safe
, in order to render it:
<div class="article-body">{{ article.body.content | safe}}</div>
Forms with rich-text editing
You can create forms for your Django Prose models, to provide rich-text editing functionality. In that case, you will also need to render form.media
, to load Trix with its stylesheets.
<form method="POST" >
{% csrf_token %}
{{ form.as_p }}
{{ form.media }}
<button type="submit">Submit</button>
</form>
The same is true also, if you are rendering the forms field manually.
Attachments
Django Prose can also handle uploading attachments with drag and drop. To set this up, first you need to:
-
[x] Set up the
MEDIA_ROOT
andMEDIA_URL
of your Django project (example inexample/example/settings.py
)) -
[x] Include the Django Prose URLs (example in
example/example/urls.py
) -
[x] (Optional) Set up a different Django storage to store your files (e.g. S3)
-
Attachments are uploaded with a path structure of
/YEAR/MONTH/DATE/UUID.EXT
-
By default, only files 5MB or less are allowed.
Allowed file size can be overridden by setting PROSE_ATTACHMENT_ALLOWED_FILE_SIZE
in your Django project's settings file.
# File size in megabytes
PROSE_ATTACHMENT_ALLOWED_FILE_SIZE = 15
Full example
You can find a full example of a blog, built with Django Prose in the example
directory.
🔒 A note on security
As you can see in the examples above, what Django Prose does is provide you with a user friendly editor (Trix) for your rich text content and then store it as HTML in your database. Since you will mark this HTML as safe in order to use it in your templates, it needs to be sanitised, before it gets stored in the database.
For this reason Django Prose is using Bleach to only allow the following tags and attributes:
-
Allowed tags:
p
,ul
,ol
,li
,strong
,em
,div
,span
,a
,blockquote
,pre
,figure
,figcaption
,br
,code
,h1
,h2
,h3
,h4
,h5
,h6
,picture
,source
,img
-
Allowed attributes:
alt
,class
,id
,src
,srcset
,href
,media
Screenshots
Django Prose Documents in Django Admin
Video tutorial
If you are more of a video person, you can watch our video showcasing how to Create a blog using Django Prose on YouTube
Real world use cases
- Remote Work Café: Used to edit location pagess, like Amsterdam | Remote Work Café
- In production by multiple clients of LOGIC, from small companies to the public sector.
If you are using Django Prose in your application too, feek free to open a Pull Request to include it here. We would love to have it.
Development for Django Prose
If you plan to contribute code to Django Prose, this section is for you. All development tooling for Django Prose has been set up with Docker and Development Containers.
To get started run these commands in the provided order:
docker compose run --rm migrate
docker compose run --rm createsuperuser
docker compose up
If you are using Visual Studio code, just open this repository in a container using the Dev Containers: Open Folder in Container
.
🦄 Built with LOGIC. 🦄