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 # import
class Post(models.Model):
body_default = models.TextField()
body_editorjs = EditorJsJSONField() # Django >= 3.1
body_editorjs_text = EditorJsTextField() # Django <= 3.0
Or add custom Editor.js plugins and configs (List plugins)
django-editorjs-fields includes this list of Editor.js plugins by default:
[
'@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',
]
# models.py
from django.db import models
from django_editorjs_fields import EditorJsJSONField, EditorJsTextField
class Post(models.Model):
body_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={
"Image": {
"config": {
"endpoints": {
# Your custom backend file uploader endpoint
"byFile": "/editorjs/image_upload/"
}
}
}
},
null=True,
blank=True
)
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
Configure
The application can be configured by editing the project's settings.py
file.
Key | Description | Default |
---|---|---|
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) # from secrets import token_urlsafe |
EDITORJS_IMAGE_NAME |
Image file name postfix. Ignored when EDITORJS_IMAGE_NAME_ORIGINAL is False |
token_urlsafe(8) # 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.1.9.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | ce7ec3d96f18fd03ca8c8d3c0a423af447488a37ea9557ad99de34d4645c4d2a |
|
MD5 | 32b195aa746f98740af3f15723b9e07c |
|
BLAKE2b-256 | 6de4bcfab3890adea4547aa557adebf52db1dc72ee065ef7938c175c5df87fae |
Hashes for django_editorjs_fields-0.1.9-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 9600817d5b2507a89d6f197c4bf52fdfb1b1801ae886094189caec12b6784316 |
|
MD5 | 8fff92f7aa93862f0b20cc8ec268777b |
|
BLAKE2b-256 | c67b8a320af06b2e233ef59f52784c1597ec0dffc6503d9d17c21704b2083b73 |