django_editorjs2

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

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.