def
django-editorjs-fields
pypi i django-editorjs-fields
def

django-editorjs-fields

Django plugin for using Editor.js

by Ilya

0.2.6 (see all)License:MITCategories:Django WYSIWYG Editor
pypi i django-editorjs-fields
Readme

Editor.js for Django

Django plugin for using Editor.js

This plugin works fine with JSONField in Django >= 3.1

Django Editor.js

Python versions Python versions Downloads

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:

ArgsDescriptionDefault
pluginsList plugins Editor.jsEDITORJS_DEFAULT_PLUGINS
toolsMap of Tools to use. Set config tools for Editor.js See docsEDITORJS_DEFAULT_CONFIG_TOOLS
use_editor_jsEnables or disables the Editor.js plugin for the fieldTrue
autofocusIf true, set caret at the first Block after Editor is readyFalse
hideToolbarIf true, toolbar won't be shownFalse
inlineToolbarDefines default toolbar for all tools.True
readOnlyEnable read-only modeFalse
minHeightHeight of Editor's bottom area that allows to set focus on the last Block300
logLevelEditors log level (how many logs you want to see)ERROR
placeholderFirst Block placeholderType text...
defaultBlockThis 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 usedparagraph
i18nInternalization config{}
sanitizerDefine 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

image

Dark Theme

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

image

Configure

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

KeyDescriptionDefaultType
EDITORJS_DEFAULT_PLUGINSList of plugins names Editor.js from npmSee abovelist[str], tuple[str]
EDITORJS_DEFAULT_CONFIG_TOOLSMap of Tools to useSee abovedict[str, dict]
EDITORJS_IMAGE_UPLOAD_PATHPath uploads imagesuploads/images/str
EDITORJS_IMAGE_UPLOAD_PATH_DATESubdirectories%Y/%m/str
EDITORJS_IMAGE_NAME_ORIGINALTo use the original name of the image file?Falsebool
EDITORJS_IMAGE_NAMEImage file name. Ignored when EDITORJS_IMAGE_NAME_ORIGINAL is Truetoken_urlsafe(8)callable(filename: str, file: InMemoryUploadedFile) (docs)
EDITORJS_EMBED_HOSTNAME_ALLOWEDList 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_VERSIONVersion Editor.js2.22.3str

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