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

    "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.3.tar.gz (118.5 kB view details)

Uploaded Source

Built Distributions

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

django_editorjs2-0.3.3-py3-none-any.whl (133.8 kB view details)

Uploaded Python 3

django_editorjs2-0.3.3-py2.py3-none-any.whl (181.4 kB view details)

Uploaded Python 2Python 3

File details

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

File metadata

  • Download URL: django_editorjs2-0.3.3.tar.gz
  • Upload date:
  • Size: 118.5 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.3.tar.gz
Algorithm Hash digest
SHA256 4fc0ad898447dc57da17ad325d7cf087561b83457f083bf6a63868d97a040ca2
MD5 24c525759db179c599cc440bedbcb060
BLAKE2b-256 ac1dec78194167d58b36e6c3285ebb4fc8f70d9fe297e46c9594c222e5314282

See more details on using hashes here.

File details

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

File metadata

  • Download URL: django_editorjs2-0.3.3-py3-none-any.whl
  • Upload date:
  • Size: 133.8 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.3-py3-none-any.whl
Algorithm Hash digest
SHA256 c5ebd60fbf6a9f322c4988c51e520e3a14d8664dd3d11dd7f8f541cf7f3a2334
MD5 d5ec5e7b414e8e65681c4b1d115d135b
BLAKE2b-256 6ec8cdfd50e79201ba8e7b4959568d358d747b4e526f8346372e60ed993dbbf3

See more details on using hashes here.

File details

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

File metadata

  • Download URL: django_editorjs2-0.3.3-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.3-py2.py3-none-any.whl
Algorithm Hash digest
SHA256 23e0632fa49b0735d581e575a2ec3eb74b5930ba03be0afc6591c2b28f12f256
MD5 103873370c0169e8c2d310c7e6273938
BLAKE2b-256 09b06c61aea95042da2f8a48d53b0f80891535708f60bb381f2f80794142c1b4

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