Django plugin for using Editor.js
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',
]
Usage
Add code in your model
# models.py
from django.db import models
from django_editorjs_fields import EditorJsJSONField, EditorJsTextField
class Post(models.Model):
body_default = models.TextField()
body_editorjs = EditorJsJSONField() # Django >= 3.1
body_editorjs_text = EditorJsTextField() # Django <= 3.0
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": "/editorjs/image_upload/"}},
},
'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'},
'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 |
---|---|---|
EDITORJS_DEFAULT_PLUGINS |
List of plugins names Editor.js from npm | See above |
EDITORJS_DEFAULT_CONFIG_TOOLS |
Map of Tools to use | See above |
EDITORJS_IMAGE_UPLOAD_PATH |
Path uploads images | settings.MEDIA_URL + 'uploads/images/' |
EDITORJS_IMAGE_NAME_ORIGINAL |
To use the original name of the image file? | False |
EDITORJS_IMAGE_NAME_POSTFIX |
Image file name postfix. Ignored when EDITORJS_IMAGE_NAME_ORIGINAL is True |
token_urlsafe(5) |
EDITORJS_IMAGE_NAME |
Image file name postfix. Ignored when EDITORJS_IMAGE_NAME_ORIGINAL is False |
token_urlsafe(8) |
EDITORJS_VERSION |
Version Editor.js | 2.22.1 |
For EDITORJS_IMAGE_NAME_POSTFIX
and 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
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-editorjs-fields-0.2.1.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | eebc35f02c6b5b73846f404b4a3870a2156f7fed1c1ada8e3895de8c39464214 |
|
MD5 | 6db922817d00501b99b03eb3aa4bb61e |
|
BLAKE2b-256 | 6613bd4b44a65aafe2d77d66073ada7afcd57ab1d3a895f50d510866cf3eaf98 |
Hashes for django_editorjs_fields-0.2.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 48c725443ae15f5be981c88f76a8be563ec44ec320e437d8d8bfac93c052d2f8 |
|
MD5 | 3343177ace8c29d76ad96f9754a33ba4 |
|
BLAKE2b-256 | 963486ca2bd733a811cdd2f1711fd4f2d659da9997a51866125ee9b7690a3568 |