Summernote WYSIWYG Editor integration in Django

Sanket Lolge   09 June,2021  

Table of Contents

  1. Introduction

  2. Why would you need a WYSIWYG editor?

  3. Step 1: Create Virtual Environment

  4. Step 2: Create Project

  5. Step 3: Create Application

  6. Step 4: Create Model

  7. Step 5: Update file

  8. Step 6: Create

  9. Step 7: Write Function

  10. Step 8: Create file

  11. Step 9: Create Template

  12. Step 10: Run Server


A WYSIWYG (pronounced “wiz-ee-wig”) editor or program is one that allows a developer to see what the result will look like while the interface or document is being created. WYSIWYG is an acronym for “what you see is what you get”.

There are many WYSIWYG editors out there such as TinyMCE, Froala, CKEditor, etc. But recently I stumble on this very simple yet flexible text editor Summernote.

However, I recently discovered Summernote, a really simple yet flexible text editor.

In this blog, we will go through the integration of the Summernote WYSIWYG HTML Editor in Django.

Why would you need a WYSIWYG editor?

Suppose you are building a blog application you have to format your content a lot like adding different headings, links, images and lot in such case a WYSIWYG editor can save you from a lot of pain.

Here is a preview of what we are going to build by the end of this blog.

First, create folder Summernote and enter them into the folder

$ mkdir Summernote && cd Summernote

Step 1: Create Virtual Environment

Create Virtual Environment  for our project

$ virtualenv ENV

Then activate that environment using the following command

$ source ENV/bin/activate

Step 2: Create Project

The next step is to create a project

$ startproject config

$ cd config

Install Django

Install Django and summernote in our project environment

$ pip install django

$ pip install django-summernote

Step 3: Create Application

Create posts application in config project

$ python startapp posts

open code in visual studio code editor

$ code .

Open the in the posts application and add the following code to it.

from django.db import models

# Create your models here.

class Post(models.Model):

        title = models.CharField(max_length=255)

        content = models.TextField()

        def __str__(self):

                return self.title


Step 4: Create Model

Now we need to add summernote to model fields, open file of the app.

from django.contrib import admin

from django_summernote.admin import SummernoteModelAdmin

from .models import Post


# Register your models here.

class PostAdmin(SummernoteModelAdmin):

    summernote_fields = ('content', ), PostAdmin)


Step 5: Update file

Open and make the following changes:





MEDIA_URL = '/media/'



SUMMERNOTE_THEME = 'bs4' # Use Bootstrap4 theme


Step 6: Create Superuser

Save the file, create a superuser and navigate to the admin dashboard you should see the summernote editor on the content field.

$ python createsuperuser



Step 7: Create

Open in config application, and make the following changes:

from django.urls import path, include

urlspatterns = [

        path('summernote/', include('django_summernote.urls')),

        path('', include('posts.urls')),




Step 8: Write Function

Write a function for creating a post form

from django.shortcuts import render

from .forms import PostForm


def form(request):

        # create object of form

        form = PostForm(request.POST or None, request.FILES or None)

        # check if form data is valid

        if form.is_valid():

        # save the form data to model


        context = {



        return render(request, "home.html", context)



Step 8: Create file

from django import forms

from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget

from .models import *

from django.forms import ModelForm


class PostForm(forms.ModelForm):

        content = forms.CharField(widget=SummernoteWidget())


        class Meta:

                model = Post

                fields = ('title', 'content')

                widgets = {

                'content': SummernoteWidget(),



Step 9: Create Template

create a template home.html under the template folder and add following code in it.

<!DOCTYPE html>

<html lang="en">


<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">




    <form method="POST" action="" autocomplete="off">

        {% csrf_token %}

        Title: {{ form.title|safe }}<br><br>

        Content:{{ form.content|safe }}

        <button type="submit" class="btn btn-success">Submit</button>





While rendering the content in templates use the safe filter which prevents HTML from escaping.

create file in posts application and add the following urlpattern

from django.contrib import admin

from django.urls import path, include

from .import views


urlpatterns = [

        path('form/', views.form, name='form'),



Now create a migrations file for this change and add it to our database via the migrate command.

$ python makemigrations

$ python migrate

Step 10: Start Server

start server using the following command and check output

$ python runserver