Integrate Summernote Editor in Django application

Posted by Hayri Cicek on September 16, 2020

In this tutorial, we will learn how to integrate Summernote WYSIWYG Editor in Django Application.

Sample Project


$ mkdir summernote_django && cd summernote_django
$ pipenv install django django-summernote
$ pipenv shell
$ django-admin startproject config .
$ python manage.py startapp posts

Open the models.py in posts application and make it look like the following:


from django.db import models


class Post(models.Model):
    title = models.CharField(max_length=255)
    content = models.TextField()

    def __str__(self):
        return self.title

Open settings.py and make the following changes:


INSTALLED_APPS = [
    ...
    'posts.apps.PostsConfig',
    'django_summernote',
]

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR, 'media/'

X_FRAME_OPTIONS = 'SAMEORIGIN'
SUMMERNOTE_THEME = 'bs4'    # Use Bootstrap4 theme

Open urls.py in config application, and make the following changes:


from django.urls import path, include

urlspatterns = [
    ...
    path('summernote/', include('django_summernote.urls')),
    ...
]

Run database migrations using the following commands.


$ python manage.py makemigrations
$ python manage.py migrate

Django Admin site
Open admin.py file in posts application and make it look like the following:


from django.contrib import admin
from django_summernote.admin import SummernoteModelAdmin

from .models import Post


class PostAdmin(SummernoteModelAdmin):
    summernote_fields = ('content', )


admin.site.register(Post, PostAdmin)

Navigate to Django admin and click on Add Post, you should see the Summernote editor on the content field.

Django ModelForm
Create a new file called forms.py in posts application, and add the following:


from django import forms
from django_summernote.widgets import SummernoteWidget


class PostForm(forms.ModelForm):
    content = forms.CharField(widget=SummernoteWidget())

    class Meta:
        model = Post
        fields = ('title', 'content')

We have to use the safe templatetag while displaying in templates.


{{ content|safe }}

That's it, we have integrated WYSIWYG Editor in our Django application.

Share this:

Integrate Summernote Editor in Django application

Categories