django_editorjs2

A Django app that seamlessly integrates EditorJS, a powerful block-styled editor with a clean, intuitive interface.

Admin Panel Screenshot

Django EditorJS2

A Django app that seamlessly integrates EditorJS, a powerful block-styled editor with a clean, intuitive interface.

Features

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

Requirements

Python 3.8+
Django 3.2+

Installation

1. Install the Package

pip install django-editorjs2

2. Configure Django Settings

Add django_editorjs2 to your INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'django_editorjs2',
    ...
]

3. Configure URL Routing

In your project's urls.py:

from django.urls import path, include

urlpatterns = [
    ...
    path('editorjs/', include('django_editorjs2.urls')),
    ...
]

4. Configure Media and Static Files

Ensure your MEDIA_URL and STATIC_URL are properly configured in settings.py.

5. Run Migrations

python manage.py migrate
python manage.py collectstatic

6. Add static tag

<head>
....
{{form.media}}
....
</head>

Configuration

Advanced Configuration Options

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",]

}

Usage Example

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()

Customize new EditorJS(Config) Variable

// Override default configuration => new EditorJS(Config)
window.updateEditorJsConfig(config)=>{
    return config
}

Custom Preprocessors and Callbacks

You can create custom preprocessors and callbacks to:

Modify image links
Handle file downloads
Add custom processing before file save
Modify response handling

Troubleshooting

Ensure all static files are collected
Check that MEDIA_URL and STATIC_URL are correctly configured
Verify path to preprocessors and callbacks

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License

Support

If you encounter any issues or have questions, please open an issue on GitHub.

Release files for django-editorjs2 0.3.8

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-editorjs2 0.3.8
File	Size	Uploaded
django_editorjs2-0.3.8.tar.gz	171.2 kB	Jan 23, 2025	Details

Built distribution (wheel)

Table of built distributions (wheels) for django-editorjs2 0.3.8
File	Interpreter	ABI	Platform	Reset
django_editorjs2-0.3.8-py3-none-any.whl 186.5 kB Jan 23, 2025	Python 3	none	any	Details

Total release size: 357.7 kB

Release files / django_editorjs2-0.3.8.tar.gz

Download URL	django_editorjs2-0.3.8.tar.gz
Size	171.2 kB
Tags	Source
SHA-256 checksum How to use checksums	`2f66cbf0ac450dec393038fe72550e500ff015ab00afa7fc4bdeaa1f25b7f336`
BLAKE2b-256 checksum How to use checksums	`83c046ed68a8974ad20b08b8a3ee98434e901baa1beef47aceb2b810e6314a6b`
Upload date	Jan 23, 2025
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`poetry/1.8.5 CPython/3.13.0 Linux/6.11.10-300.fc41.x86_64`

Release files / django_editorjs2-0.3.8-py3-none-any.whl

Download URL	django_editorjs2-0.3.8-py3-none-any.whl
Size	186.5 kB
Tags	Python 3
SHA-256 checksum How to use checksums	`d78089c303bb4d9f8c17f12f77e697edbe03d3df6d56ba2c8015f43c89944564`
BLAKE2b-256 checksum How to use checksums	`8f6726aebb876d3175de32b7f043fd5beb4e8a525984d06ab4f4ed4ea56813fb`
Upload date	Jan 23, 2025
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`poetry/1.8.5 CPython/3.13.0 Linux/6.11.10-300.fc41.x86_64`