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.

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

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.4.tar.gz (166.4 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.4-py2.py3-none-any.whl (181.4 kB view details)

Uploaded Python 2Python 3

File details

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

File metadata

  • Download URL: django_editorjs2-0.3.4.tar.gz
  • Upload date:
  • Size: 166.4 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.4.tar.gz
Algorithm Hash digest
SHA256 7452ff041074d8db99330e73d1cf464e0eef22b6c36204e30849a8e73da2f539
MD5 0bd56c4ed52d4d4557b07d27e2727ca3
BLAKE2b-256 7424291c6d970afc21e0e276b728e626f23ce5e8d18026e030a91bd59d20d219

See more details on using hashes here.

File details

Details for the file django_editorjs2-0.3.4-py2.py3-none-any.whl.

File metadata

  • Download URL: django_editorjs2-0.3.4-py2.py3-none-any.whl
  • Upload date:
  • Size: 181.4 kB
  • Tags: Python 2, 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.4-py2.py3-none-any.whl
Algorithm Hash digest
SHA256 3a8044a8899b88690183f785d3316599a871b33776f6435bde9ffb3bac9ce411
MD5 6eca1cc974ca74622fc4a793884867ac
BLAKE2b-256 98a3ed38cfdd5cf91971df544094c3b6b03f05092f5f09a6df52832c079d9e87

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