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.1.tar.gz (124.7 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.1-py3-none-any.whl (133.7 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: django_editorjs2-0.3.2.1.tar.gz
  • Upload date:
  • Size: 124.7 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.1.tar.gz
Algorithm Hash digest
SHA256 97bfd2ce7f78c49ad23552fb1606c069a9b3263c3d336459c0248ae37cf1ba92
MD5 bf385eb959b0db8877c4b316f93db55e
BLAKE2b-256 0c00b751be12feb34f99bf749fdc67621baeb01dd118455890f8bb883104138e

See more details on using hashes here.

File details

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

File metadata

  • Download URL: django_editorjs2-0.3.2.1-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.1-py3-none-any.whl
Algorithm Hash digest
SHA256 72050066bc6f7848a670b15da312d5a0ded30936f87230a0299dc376266d1339
MD5 abfc1bd2e1963f03eae92519348ee993
BLAKE2b-256 948e3a369ea5d015b6f955643273ee366f8c9240282225a2edb572ead6a55442

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