Skip to main content

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

Project description

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

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

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.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django_editorjs2-0.3.2.tar.gz (118.3 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

django_editorjs2-0.3.2-py3-none-any.whl (133.7 kB view details)

Uploaded Python 3

File details

Details for the file django_editorjs2-0.3.2.tar.gz.

File metadata

  • Download URL: django_editorjs2-0.3.2.tar.gz
  • Upload date:
  • Size: 118.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.8.4 CPython/3.13.0 Linux/6.11.8-300.fc41.x86_64

File hashes

Hashes for django_editorjs2-0.3.2.tar.gz
Algorithm Hash digest
SHA256 b52fc6b5ca3c5dd7c02451436653dc57b7897df04eeb18cc4903248619b336c5
MD5 4e7a98dda809f2bc78cd79ea4b2db9e2
BLAKE2b-256 fb5d501e52763152c2ba014af053a2506e3dedf8385c59e25a231d4adb8bc0a2

See more details on using hashes here.

File details

Details for the file django_editorjs2-0.3.2-py3-none-any.whl.

File metadata

  • Download URL: django_editorjs2-0.3.2-py3-none-any.whl
  • Upload date:
  • Size: 133.7 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.8.4 CPython/3.13.0 Linux/6.11.8-300.fc41.x86_64

File hashes

Hashes for django_editorjs2-0.3.2-py3-none-any.whl
Algorithm Hash digest
SHA256 a2b32de3e0466e28d0e1c9c68c33c4f1a44b7e3ffeeac711fdf219aaa484bd2b
MD5 0fa4eff9545d7757b96328763badd3c5
BLAKE2b-256 2f8ea407c3f59088f7e657407078ae8ffbe2a52b0552efc39ff1854933748b3b

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page