django-editorjs

Plugin for using Editor.js in django admin.

• Supported tools
• Installation
• Simple example
• Configuration
• Base configuration
• How to configure fields and tools
• API
• How to run demo

Supported tools

• @editorjs/paragraph -
• @editorjs/image -
• @editorjs/header -
• @editorjs/checklist -
• @editorjs/list -
• @editorjs/quote -
• @editorjs/raw -
• @editorjs/embed -
• @editorjs/delimiter -
• @editorjs/warning -
• @editorjs/link -
• @editorjs/marker -
• @editorjs/attaches -
• @editorjs/table -

Installation

1. First step is install plugin. bash pip install django-editorjs
2. Add plugin to INSTALLED_APPS in Django settings file. python # settings.py INSTALLED_APPS = [ # some other apps 'django_editorjs' ]
3. Register plugin's endpoints in in urlpatterns python # urls.py from django_editorjs.urls import urlpatterns urlpatterns = [ # other urls *urlpatterns ]

Simple example

# models.py
from django.db import models
from django_editorjs import EditorJsField

class Post(models.Model):
    title = models.CharField(max_length=255)
    body = EditorJsField()

    def __str__(self):
        return self.title

Configuration

Base configuration

This plugin provides additional functionality for saving images and files + allow to get information about some link. You can to configure some options in your settings.py file.

• EDITORJS_IMAGES_FOLDER - Default folder for keep images uploaded through EditorJs (Default: {MEDIA_ROOT}/editorjs)
• EDITORJS_FILES_FOLDER - Default folder for keep files uploaded through EditorJs (Default: {MEDIA_ROOT}/editorjs)

How to configure fields

⚠️ Note (for plugin configuration)

Usually in examples for Editor.js you will see tool names starts with lowercase, but for bypass potential conflicts i name tools with capital letters.

You can provide field specific configuration options to EditorJsField by argument editorjs_config.

Example

class Post(models.Model):
    title = models.TextField()
    body = EditorJsField(
        editorjs_config={
            "tools": {
                "Table": {
                    "disabled": False,
                    "inlineToolbar": True,
                    "config": {"rows": 2, "cols": 3,},
                }
            }
        }
    )

Config schema

• tools
• Image - (dict) configuration for tool ImageTool. (For more info see official documentation for tool).
• Header - (dict) configuration for tool Header. (For more info see official documentation for tool).
• Checklist - (dict) configuration for tool Checklist. (For more info see official documentation for tool).
• List - (dict) configuration for tool List. (For more info see official documentation for tool).
• Quote - (dict) configuration for tool Quote. (For more info see official documentation for tool).
• Raw - (dict) configuration for tool RawTool. (For more info see official documentation for tool).
• Embed - (dict) configuration for tool Embed. (For more info see official documentation for tool).
• Delimiter - (dict) configuration for tool Delimiter. (For more info see official documentation for tool).
• Warning - (dict) configuration for tool Warning. (For more info see official documentation for tool).
• Link - (dict) configuration for tool LinkTool. (For more info see official documentation for tool).
• Marker - (dict) configuration for tool Marker. (For more info see official documentation for tool).
• Attaches - (dict) configuration for tool AttachesTool. (For more info see official documentation for tool).
• Table - (dict) configuration for tool Table. (For more info see official documentation for tool).

API

• EditorJsField

Extends TextField and use EditorJsWidget as widget + have additional argument in constructor: editorjs_config.

• EditorJsWidget

Widget that you can to use for using Editor.js in Django.

Custom ImageSaver

ImageSaver is class for saving images on disk. You can to create custom saver. Custom saver must implement this interface:

class ImageSaver:
  save(file: File) -> ImageSaveResult

after creating class you can to change option EDITORJS_IMAGES_SAVER in settings to somethink like:

# settings.py
EDITORJS_IMAGES_SAVER = "your_app.your_module.YourImageSaverClass"

Custom FileSaver

Similary to ImageSaver you can to create custom FileSaver class with this interface:

class FileSaver:
  save(file: File) -> FileSaveResult

How to run demo

poetry install
poetry run python ./demo/manage.py migrate
poetry run python ./demo/manage.py createsuperuser
poetry run python ./demo/manage.py runserver

TODO

• load tool on demand
• more examples in README.md
• view-function for file uploading
• view-function for image uploading
• view-function for link info crawler