A Django app that seamlessly integrates EditorJS, a powerful block-styled editor with a clean, intuitive interface.
A Django app that seamlessly integrates EditorJS, a powerful block-styled editor with a clean, intuitive interface.
- Easy integration with Django projects
- Full support for EditorJS block-style editing
- Customizable configuration
- File upload and preprocessing capabilities
- Extensible with custom preprocessors and callbacks
- Python 3.8+
- Django 3.2+
pip install django-editorjs2Add django_editorjs2 to your INSTALLED_APPS:
INSTALLED_APPS = [
...
'django_editorjs2',
...
]In your project's urls.py:
from django.urls import path, include
urlpatterns = [
...
path('editorjs/', include('django_editorjs2.urls')),
...
]Ensure your MEDIA_URL and STATIC_URL are properly configured in settings.py.
python manage.py migrate
python manage.py collectstatic<head>
....
{{form.media}}
....
</head>In your settings.py, you can customize the EditorJS2 behavior:
DJANGO_EDITORJS2_CONFIG = {
# Preprocessors for preview generation
"image_link_preprocessor": "django_editorjs2.blogapp.utils.image_link_preprocessor",
"download_link_preprocessor": "django_editorjs2.blogapp.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": "django_editorjs2.blogapp.utils.callback_before_file_save",
# before returning the response, the response object is passed to this function
"callback_before_return_response": "django_editorjs2.blogapp.utils.callback_before_return_response",
# widget
"editorjs_field_preview_callback": "django_editorjs2.blogapp.utils.editorjs_field_preview_callback",
"editorjs_field_save_callback": "django_editorjs2.blogapp.utils.editorjs_field_save_callback",
"max_attachment_size_bytes": 5 * 1024 * 1024, # 5 MiB
"attachment_file_extensions": ["zip","doc","docx",]
}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()// Override default configuration => new EditorJS(Config)
window.updateEditorJsConfig(config)=>{
return config
}You can create custom preprocessors and callbacks to:
- Modify image links
- Handle file downloads
- Add custom processing before file save
- Modify response handling
- Ensure all static files are collected
- Check that
MEDIA_URLandSTATIC_URLare correctly configured - Verify path to preprocessors and callbacks
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License
If you encounter any issues or have questions, please open an issue on GitHub.