Skip to content

Latest commit

 

History

History
168 lines (121 loc) · 3.97 KB

README.md

File metadata and controls

168 lines (121 loc) · 3.97 KB

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.