Django EditorJS Field

Django >4.* (Not tested in old versions)

An EditorJS Field with dependency injection of tools support for Django >4.*

Features

• Dependency injection for tools
• Templatetag support
• All EditorJS configuration supported
• Without custom backend
• Customized editor in admin
• Debug support

Installation and Usage

Installation

Some day it will be django-editorjs-field...

Install package via pip:

pip install django-editorjs-field-next

Add package to INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    "django_editorjs_field"
]

Usage

Note!
If you will not provide configuration, you will have only default Paragraph Tool.

Example of field configuration:

from django_editorjs_field.tool import EditorJSTool as Tool


EditorJSField(
    tools=[
        Tool(name="Header", url="//cdn.jsdelivr.net/npm/@editorjs/header", template_name="tools/h.html"),
        Tool(
            name="Code",
            url="https://cdn.jsdelivr.net/npm/@editorjs/code@2.8.0",
            class_name="CodeTool",
            template_name="tools/code.html"
        )
    ]
)

Any kwargs that you add will pass to EditorJS configuration. For example, if you want autofocus, placeholder and i18n, you just add to field arguments:

autofocus=False,
placeholder="EditorJSPlaceholder",
i18n={
    "messages": {
        "toolNames": {
            "Heading": "Заголовок"
        }
    }
}

templatetag

Example of templatetag:

{% load editorjs %}

{% for article in articles_list %}
    <div>
        <h3>{{ article.title }}</h3>
        {% render article %}
    </div>
{% endfor %}

Tools

All tools (plugins) are independent objects. Tool constructor define as:

def __init__(self, name: str, url: str, template_name: str, class_name: str | None = None, **kwargs):
    """
        An EditorJSTool constructor

        ...

        Attributes
        ==========
        name : str
            Must be unique!
            A name of a Tool. Used as a type in EditorJS.
        url : str
            A URL or Path to JS-file of Tool.
        template_name : str
            A Path to template for output rendering.
        class_name : str | None
            Name attribute is used by default.
            A class name of Tool, which JS need to call constructor for.
        version : str | None
            Required plugin version.
    """

Override Paragraph Tool

In order to override Paragraph Tool you need to pass it as a tool into field. Example:

from django_editorjs_field.tool import EditorJSTool as Tool


EditorJSField(
    tools=[
        Tool(
            name="paragraph",
            url="//cdn.jsdelivr.net/npm/@editorjs/paragraph@2.0.2",
            class_name="Paragraph",
            template_name="tools/p.html"
        )
        Tool(name="Header", url="//cdn.jsdelivr.net/npm/@editorjs/header", template_name="tools/h.html"),
    ],
    ...
)

License

MIT

Authors

Evgeniy Gribanov

FAQ

About Debug support

If you run Django in DEBUG mode, your EditorJS inherit this mode too. It means that you will have usefull messages in your browser console about Editor Configuration and work.