Block Editor.js: Introducing Django EditorJS2
For Django developers seeking a powerful, flexible rich text editing solution, Django EditorJS2 is a package that seamlessly integrates the popular EditorJS editor into Django projects.
Seamless Django Integration
Django EditorJS2 isn’t just another third-party package; it’s a meticulously crafted solution designed specifically for Django projects. With straightforward installation and configuration, developers can implement advanced editing capabilities in minutes.
Django EditorJS2 can be used in various scenarios:
- Blog platforms
- Content management systems
- Documentation websites
- Interactive educational platforms
Getting Started: A Quick Guide
- Installing Django EditorJS2 is as simple as running a single pip command:
pip install django-editorjs22. Add django_editorjs2 to your INSTALLED_APPS:
INSTALLED_APPS = [
...
'django_editorjs2',
...
]3. Configure URL Routing
urlpatterns = [
path('editorjs/', include('django_editorjs2.urls')),
]4. Implement in Models
from django_editorjs2.fields import EditorJsField
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=200)
content = EditorJsField()
# you can get preview like this
article = Article.objects.first()
# this will render html
article.content_preview()5. Configure Media and Static Files
Ensure your MEDIA_URL and STATIC_URL are properly configured in settings.py.
6. Run Migrations
python manage.py migrate
python manage.py collectstatic7. Use form media tag
<head>
....
{{form.media}}
....
</head>That’s It.
Advanced Configuration: Tailoring to Your Needs
Django EditorJS2 doesn’t just offer basic functionality — it provides extensive customization options. From preprocessors to callbacks, you can fine-tune every aspect of the editor.
Custom Preprocessors
Want to modify image links or handle file downloads differently? The package allows you to create custom preprocessors that transform content before rendering or saving.
In your settings.py, you can customize the EditorJS2 behavior:
DJANGO_EDITORJS2_CONFIG = {
# Preprocessors for preview generation
"image_link_preprocessor": "utils.image_link_preprocessor",
"download_link_preprocessor": "utils.download_link_preprocessor",
# Custom styling and attributes for different block types
"extra_attributes": {
"list": {"style": "list-style: none"},
"checklist": {"style": "list-style: none"},
"paragraph": {},
"header": {},
"quote": {},
"code": {},
"image": {},
"embed": {},
"table": {},
"delimiter": {},
"attaches": {},
},
# before saving the file, djanog model object EditorJsUploadFiles is passed to this function
"callback_before_file_save": "utils.callback_before_file_save",
# before returning the response, the response object is passed to this function
"callback_before_return_response": "utils.callback_before_return_response",
# widget
"editorjs_field_preview_callback": "utils.editorjs_field_preview_callback",
"editorjs_field_save_callback": "utils.editorjs_field_save_callback",
"max_attachment_size_bytes": 5 * 1024 * 1024, # 5 MiB
"attachment_file_extensions": ["zip","doc","docx",]
}Github: https://github.com/surajsinghbisht054/django_editorjs2
