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