Integrating EditorJS with Django

Integrating EditorJS with Django

Learn how to integrate a cool wysiwyg editor Editorjs with Django, where we can paste/upload images, have different headings, lists, code snippets, most importantly we can upload files also.

EditorJS might give writers in your blog the same feel writers in medium get,more or less. Want to integrate Django and editorJS together for a blog or something similar? This article might help you.

Assumption : _You already have a Ajango project and a app where you are going to use editorjs

Step 1 : Installing django editorjs

pip install django-editorjs

Now adddjango_editorjs to INSTALLED_APPS in settings.py (Note the underscore here)

Step 2 : Creating the model

Now before we create the model , let me inform you that to upload images you need to setup your own file uploading solution (I have covered that too !)

So here I will create a Post model where I will first import EditorJsField

_from django_editorjs import EditorJsField_

then I will create fields for Post, the body field will have EditorJsField .

Image for post

Post model

But if you need to have images inside that post then :

Image for post

Post Model with images for editorJs enabled

So in this model we have editorjs_config which will have custom settings for image.

Notice :

1. I have two urls for byFile and byUrl fields in endpoints in config of Image. we will be creating those urls from scratch.

2. I also have additionalRequestHeaders field which has a array of objects ,though only one object is there . This object has :

Content-Type:’multipart/form-data’

This header is necessary for uploading images.

Now make migrations and migrate.

Images when uploaded to editorJS will be pushed to the server , if server returns success only then we can have that image in the editor space.

django web-development python programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Python Developers

Are you looking for experienced, reliable, and qualified Python developers? If yes, you have reached the right place. At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, our full-stack Python development services...

Hire Python Developers India

Looking to build robust, scalable, and dynamic responsive websites and applications in Python? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, we constantly endeavor to give you exactly what you need. If you need to...

Python Django Full Course | Django Tutorial | Django Web Framework

Python Django full course | Django Tutorial | Django Web Framework | you will be learning almost everything you need to create web application with Django framework.

Basic Data Types in Python | Python Web Development For Beginners

In the programming world, Data types play an important role. Each Variable is stored in different data types and responsible for various functions. Python had two different objects, and They are mutable and immutable objects.