Django plugin for using Editor.js

These details have not been verified by PyPI

Project links

Project description

Editor.js for Django

Django plugin for using Editor.js

This plugin works fine with JSONField in Django >= 3.1

Installation

pip install django-editorjs-fields

Add django_editorjs_fields to INSTALLED_APPS in settings.py for your project:

# settings.py
INSTALLED_APPS = [
    ...
    'django_editorjs_fields',
]

Upgrade

pip install django-editorjs-fields --upgrade
python manage.py collectstatic  # upgrade js and css files

Usage

Add code in your model

# models.py
from django.db import models
from django_editorjs_fields import EditorJsJSONField  # Django >= 3.1
from django_editorjs_fields import EditorJsTextField


class Post(models.Model):
    body_default = models.TextField()
    body_editorjs = EditorJsJSONField()  # Django >= 3.1
    body_editorjs_text = EditorJsTextField()

New in version 0.2.1. Django Templates support

<!-- template.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    {% load editorjs %}
    {{ post.body_default }}
    {{ post.body_editorjs | editorjs}}
    {{ post.body_editorjs_text | editorjs}}
  </body>
</html>

Additionally

You can add custom Editor.js plugins and configs (List plugins)

Example custom field in models.py

# models.py
from django.db import models
from django_editorjs_fields import EditorJsJSONField


class Post(models.Model):
    body_editorjs_custom = EditorJsJSONField(
        plugins=[
            "@editorjs/image",
            "@editorjs/header",
            "editorjs-github-gist-plugin",
            "@editorjs/code@2.6.0",  # version allowed :)
            "@editorjs/list@latest",
            "@editorjs/inline-code",
            "@editorjs/table",
        ],
        tools={
            "Gist": {
                "class": "Gist"  # Include the plugin class. See docs Editor.js plugins
            },
            "Image": {
                "config": {
                    "endpoints": {
                        "byFile": "/editorjs/image_upload/"  # Your custom backend file uploader endpoint
                    }
                }
            }
        },
        i18n={
            'messages': {
                'blockTunes': {
                    "delete": {
                        "Delete": "Удалить"
                    },
                    "moveUp": {
                        "Move up": "Переместить вверх"
                    },
                    "moveDown": {
                        "Move down": "Переместить вниз"
                    }
                }
            },
        }
        null=True,
        blank=True
    )

django-editorjs-fields support this list of Editor.js plugins by default:

EDITORJS_DEFAULT_PLUGINS

EDITORJS_DEFAULT_PLUGINS = (
    '@editorjs/paragraph',
    '@editorjs/image',
    '@editorjs/header',
    '@editorjs/list',
    '@editorjs/checklist',
    '@editorjs/quote',
    '@editorjs/raw',
    '@editorjs/code',
    '@editorjs/inline-code',
    '@editorjs/embed',
    '@editorjs/delimiter',
    '@editorjs/warning',
    '@editorjs/link',
    '@editorjs/marker',
    '@editorjs/table',
)

EDITORJS_DEFAULT_CONFIG_TOOLS

EDITORJS_DEFAULT_CONFIG_TOOLS = {
    'Image': {
        'class': 'ImageTool',
        'inlineToolbar': True,
        "config": {
            "endpoints": {
                "byFile": reverse_lazy('editorjs_image_upload'),
                "byUrl": reverse_lazy('editorjs_image_by_url')
            }
        },
    },
    'Header': {
        'class': 'Header',
        'inlineToolbar': True,
        'config': {
            'placeholder': 'Enter a header',
            'levels': [2, 3, 4],
            'defaultLevel': 2,
        }
    },
    'Checklist': {'class': 'Checklist', 'inlineToolbar': True},
    'List': {'class': 'List', 'inlineToolbar': True},
    'Quote': {'class': 'Quote', 'inlineToolbar': True},
    'Raw': {'class': 'RawTool'},
    'Code': {'class': 'CodeTool'},
    'InlineCode': {'class': 'InlineCode'},
    'Embed': {'class': 'Embed'},
    'Delimiter': {'class': 'Delimiter'},
    'Warning': {'class': 'Warning', 'inlineToolbar': True},
    'LinkTool': {
        'class': 'LinkTool',
        'config': {
            'endpoint': reverse_lazy('editorjs_linktool'),
        }
    },
    'Marker': {'class': 'Marker', 'inlineToolbar': True},
    'Table': {'class': 'Table', 'inlineToolbar': True},
}

EditorJsJSONField accepts all the arguments of JSONField class.

EditorJsTextField accepts all the arguments of TextField class.

Additionally, it includes arguments such as:

Args	Description	Default
`plugins`	List plugins Editor.js	`EDITORJS_DEFAULT_PLUGINS`
`tools`	Map of Tools to use. Set config `tools` for Editor.js See docs	`EDITORJS_DEFAULT_CONFIG_TOOLS`
`use_editor_js`	Enables or disables the Editor.js plugin for the field	`True`
`autofocus`	If true, set caret at the first Block after Editor is ready	`False`
`hideToolbar`	If true, toolbar won't be shown	`False`
`inlineToolbar`	Defines default toolbar for all tools.	`True`
`readOnly`	Enable read-only mode	`False`
`minHeight`	Height of Editor's bottom area that allows to set focus on the last Block	`300`
`logLevel`	Editors log level (how many logs you want to see)	`ERROR`
`placeholder`	First Block placeholder	`Type text...`
`defaultBlock`	This Tool will be used as default. Name should be equal to one of Tool`s keys of passed tools. If not specified, Paragraph Tool will be used	`paragraph`
`i18n`	Internalization config	`{}`
`sanitizer`	Define default sanitizer configuration	`{ p: true, b: true, a: true }`

Image uploads

If you want to upload images to the editor then add django_editorjs_fields.urls to urls.py for your project with DEBUG=True:

# urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...
    path('editorjs/', include('django_editorjs_fields.urls')),
    ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

In production DEBUG=False (use nginx to display images):

# urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    ...
    path('editorjs/', include('django_editorjs_fields.urls')),
    ...
]

See an example of how you can work with the plugin here

Forms

from django import forms
from django_editorjs_fields import EditorJsWidget


class TestForm(forms.ModelForm):
    class Meta:
        model = Post
        exclude = []
        widgets = {
            'body_editorjs': EditorJsWidget(config={'minHeight': 100}),
            'body_editorjs_text': EditorJsWidget(plugins=["@editorjs/image", "@editorjs/header"])
        }

Theme

Default Theme

Dark Theme

plugin use css property prefers-color-scheme to define a dark theme in browser

Configure

The application can be configured by editing the project's settings.py file.

Key	Description	Default	Type
`EDITORJS_DEFAULT_PLUGINS`	List of plugins names Editor.js from npm	See above	`list[str]`, `tuple[str]`
`EDITORJS_DEFAULT_CONFIG_TOOLS`	Map of Tools to use	See above	`dict[str, dict]`
`EDITORJS_IMAGE_UPLOAD_PATH`	Path uploads images	`uploads/images/`	`str`
`EDITORJS_IMAGE_UPLOAD_PATH_DATE`	Subdirectories	`%Y/%m/`	`str`
`EDITORJS_IMAGE_NAME_ORIGINAL`	To use the original name of the image file?	`False`	`bool`
`EDITORJS_IMAGE_NAME`	Image file name. Ignored when `EDITORJS_IMAGE_NAME_ORIGINAL` is `True`	`token_urlsafe(8)`	`callable(filename: str, file: InMemoryUploadedFile)` (docs)
`EDITORJS_EMBED_HOSTNAME_ALLOWED`	List of allowed hostname for embed	`('player.vimeo.com','www.youtube.com','coub.com','vine.co','imgur.com','gfycat.com','player.twitch.tv','player.twitch.tv','music.yandex.ru','codepen.io','www.instagram.com','twitframe.com','assets.pinterest.com','www.facebook.com','www.aparat.com'),`	`list[str]`, `tuple[str]`
`EDITORJS_VERSION`	Version Editor.js	`2.25.0`	`str`

For EDITORJS_IMAGE_NAME was used from secrets import token_urlsafe

Support and updates

Use github issues https://github.com/2ik/django-editorjs-fields/issues

Project details

These details have not been verified by PyPI

Project links

Release history Release notifications | RSS feed

This version

0.2.7

Sep 16, 2022

0.2.6

Nov 5, 2021

0.2.5

Oct 19, 2021

0.2.4

Oct 12, 2021

0.2.3

Sep 23, 2021

0.2.2

Aug 3, 2021

0.2.1

Jul 2, 2021

0.2.0

Oct 20, 2020

0.1.9

Oct 19, 2020

0.1.1

Oct 15, 2020

Download files

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

Source Distribution

django-editorjs-fields-0.2.7.tar.gz (21.2 kB view details)

Uploaded Sep 16, 2022 Source

Built Distribution

django_editorjs_fields-0.2.7-py3-none-any.whl (18.2 kB view details)

Uploaded Sep 16, 2022 Python 3

File details

Details for the file django-editorjs-fields-0.2.7.tar.gz.

File metadata

Download URL: django-editorjs-fields-0.2.7.tar.gz
Upload date: Sep 16, 2022
Size: 21.2 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: poetry/1.1.14 CPython/3.9.2 Linux/5.10.0-18-amd64

File hashes

Hashes for django-editorjs-fields-0.2.7.tar.gz
Algorithm	Hash digest
SHA256	`f31d8db403c2a0b0e8a24b320c826a76861b92853f8a911695114dc74344e8aa`
MD5	`db955f19a36c98d4093fd7658974ffcc`
BLAKE2b-256	`f31f31dc217ba063be33b9e73401013ad390b6ea5bb247baad23abf2c1cbffc5`

See more details on using hashes here.

File details

Details for the file django_editorjs_fields-0.2.7-py3-none-any.whl.

File metadata

Download URL: django_editorjs_fields-0.2.7-py3-none-any.whl
Upload date: Sep 16, 2022
Size: 18.2 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: poetry/1.1.14 CPython/3.9.2 Linux/5.10.0-18-amd64

File hashes

Hashes for django_editorjs_fields-0.2.7-py3-none-any.whl
Algorithm	Hash digest
SHA256	`2f3f139330ec1a024ed15ad9bd00deb123141eeabca7a3dd4ab8bbb1756ba991`
MD5	`55f03ed2386210cf55405ca12c295d39`
BLAKE2b-256	`adc0aa0fda3626bab3c0abf0651ef19154193363eb5fb0aa7a05282a97bf10f1`