Package: django-editorjs-fields
Editor.js for DjangoDjango plugin for usingEditor.jsThis plugin works fine with JSONField in Django >= 3.1Installationpipinstalldjango-editorjs-fieldsAdddjango_editorjs_fieldstoINSTALLED_APPSinsettings.pyfor your project:# settings.pyINSTALLED_APPS=[...'django_editorjs_fields',]Upgradepipinstalldjango-editorjs-fields--upgrade
pythonmanage.pycollectstatic# upgrade js and css filesUsageAdd code in your model# models.pyfromdjango.dbimportmodelsfromdjango_editorjs_fieldsimportEditorJsJSONField# Django >= 3.1fromdjango_editorjs_fieldsimportEditorJsTextFieldclassPost(models.Model):body_default=models.TextField()body_editorjs=EditorJsJSONField()# Django >= 3.1body_editorjs_text=EditorJsTextField()New in version 0.2.1. Django Templates support<!-- template.html --><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="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>AdditionallyYou can add custom Editor.js plugins and configs (List plugins)Example custom field in models.py# models.pyfromdjango.dbimportmodelsfromdjango_editorjs_fieldsimportEditorJsJSONFieldclassPost(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-fieldssupport this list of Editor.js plugins by default:EDITORJS_DEFAULT_PLUGINSEDITORJS_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_TOOLSEDITORJS_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},}EditorJsJSONFieldaccepts all the arguments ofJSONFieldclass.EditorJsTextFieldaccepts all the arguments ofTextFieldclass.Additionally, it includes arguments such as:ArgsDescriptionDefaultpluginsList plugins Editor.jsEDITORJS_DEFAULT_PLUGINStoolsMap of Tools to use. Set configtoolsfor Editor.jsSee docsEDITORJS_DEFAULT_CONFIG_TOOLSuse_editor_jsEnables or disables the Editor.js plugin for the fieldTrueautofocusIf true, set caret at the first Block after Editor is readyFalsehideToolbarIf true, toolbar won't be shownFalseinlineToolbarDefines default toolbar for all tools.TruereadOnlyEnable read-only modeFalseminHeightHeight of Editor's bottom area that allows to set focus on the last Block300logLevelEditors log level (how many logs you want to see)ERRORplaceholderFirst 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 usedparagraphi18nInternalization config{}sanitizerDefine default sanitizer configuration{ p: true, b: true, a: true }Image uploadsIf you want to upload images to the editor then adddjango_editorjs_fields.urlstourls.pyfor your project withDEBUG=True:# urls.pyfromdjango.contribimportadminfromdjango.urlsimportpath,includefromdjango.confimportsettingsfromdjango.conf.urls.staticimportstaticurlpatterns=[...path('editorjs/',include('django_editorjs_fields.urls')),...]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)In productionDEBUG=False(use nginx to display images):# urls.pyfromdjango.contribimportadminfromdjango.urlsimportpath,includeurlpatterns=[...path('editorjs/',include('django_editorjs_fields.urls')),...]See an example of how you can work with the pluginhereFormsfromdjangoimportformsfromdjango_editorjs_fieldsimportEditorJsWidgetclassTestForm(forms.ModelForm):classMeta:model=Postexclude=[]widgets={'body_editorjs':EditorJsWidget(config={'minHeight':100}),'body_editorjs_text':EditorJsWidget(plugins=["@editorjs/image","@editorjs/header"])}ThemeDefault ThemeDark Themeplugin use css propertyprefers-color-schemeto define a dark theme in browserConfigureThe application can be configured by editing the project'ssettings.pyfile.KeyDescriptionDefaultTypeEDITORJS_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/strEDITORJS_IMAGE_UPLOAD_PATH_DATESubdirectories%Y/%m/strEDITORJS_IMAGE_NAME_ORIGINALTo use the original name of the image file?FalseboolEDITORJS_IMAGE_NAMEImage file name. Ignored whenEDITORJS_IMAGE_NAME_ORIGINALisTruetoken_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.25.0strForEDITORJS_IMAGE_NAMEwas usedfrom secrets import token_urlsafeSupport and updatesUse github issueshttps://github.com/2ik/django-editorjs-fields/issues