Use Summernote Editor in Django

I’ve worked on countless Django projects that require rich text editing capabilities. One of the best tools I’ve found for this purpose is the Summernote editor. It’s lightweight, user-friendly, and integrates smoothly with Django, making it perfect for applications that need a useful yet simple WYSIWYG editor.

In this tutorial, I’ll walk you through how to set up and use the Summernote editor in your Django project. I’ll share the full code and practical tips from my experience, so you can get it running quickly and efficiently.

What is Summernote and Why Use It?

Summernote is a JavaScript-based WYSIWYG (What You See Is What You Get) editor that lets users format text, add images, links, and more, all in a clean, intuitive interface. Unlike basic textarea fields, Summernote provides a modern editing experience similar to popular word processors.

From my experience, Summernote stands out because:

• It’s easy to integrate with Django using the django-summernote package.
• It supports image uploads, which is essential for content-heavy applications.
• It’s customizable and lightweight, so it won’t slow down your app.
• It works well across modern browsers, ensuring a consistent user experience.

Check out Query in Descending and Ascending in Python Django

Method 1: Install and Set Up django-summernote

The easiest way to add Summernote to your Django project is by using the django-summernote package. It handles most of the heavy lifting for you.

Step 1: Install the Package

Run this command in your terminal:

pip install django-summernote

Step 2: Add to INSTALLED_APPS

In your Django project’s settings.py, add the following apps:

INSTALLED_APPS = [
    # other apps
    'django_summernote',
]

Step 3: Configure URL Patterns

In your project’s main urls.py, include Summernote’s URLs:

from django.urls import path, include

urlpatterns = [
    # your other urls
    path('summernote/', include('django_summernote.urls')),
]

Step 4: Create a Model with a Summernote-enabled Field

Here’s an example of a simple blog post model with a Summernote editor for the content field:

from django.db import models
from django_summernote.fields import SummernoteTextField

class BlogPost(models.Model):
    title = models.CharField(max_length=200)
    content = SummernoteTextField()

    def __str__(self):
        return self.title

Step 5: Register the Model in Admin with Summernote Widget

To enable Summernote in the Django admin, customize the admin class like this:

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

@admin.register(BlogPost)
class BlogPostAdmin(SummernoteModelAdmin):
    summernote_fields = ('content',)

Step 6: Apply Migrations and Run the Server

Run the migrations for your new model:

python manage.py makemigrations
python manage.py migrate

Then start your development server:

python manage.py runserver

Now, when you log into the Django admin and edit or create a BlogPost, you’ll see the Summernote editor for the content field.

I executed the above example code and added the screenshot below.

Read Python Django “Module not found” error.

Method 2: Use Summernote in Django Forms (Outside Admin)

Sometimes, you want to use Summernote in your custom forms, not just the admin. Here’s how you can do that.

Step 1: Create a Form with Summernote Widget

from django import forms
from django_summernote.widgets import SummernoteWidget
from .models import BlogPost

class BlogPostForm(forms.ModelForm):
    class Meta:
        model = BlogPost
        fields = ['title', 'content']
        widgets = {
            'content': SummernoteWidget(),
        }

Step 2: Create a View to Handle the Form

from django.shortcuts import render, redirect
from .forms import BlogPostForm

def create_blog_post(request):
    if request.method == 'POST':
        form = BlogPostForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('blog-list')  # Replace with your url name
    else:
        form = BlogPostForm()
    return render(request, 'blog/create_post.html', {'form': form})

Step 3: Add URL Pattern

Add the view to your urls.py:

from django.urls import path
from .views import create_blog_post

urlpatterns = [
    path('blog/create/', create_blog_post, name='create-blog-post'),
]

Step 4: Create the Template

Create a template blog/create_post.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Create Blog Post</title>
    {% load static %}
    {{ form.media }}
</head>
<body>
    <h1>Create a New Blog Post</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Submit</button>
    </form>
</body>
</html>

The {{ form.media }} tag ensures that Summernote’s CSS and JS files are loaded properly.

I executed the above example code and added the screenshot below.

Check out Calculator App in Python Django

Handle Image Uploads with Summernote

One feature I always enable is image uploading. django-summernote supports this out of the box.

Step 1: Configure Media Settings

In settings.py, add:

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

Make sure you have these imports and variables set:

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

Step 2: Serve Media Files in Development

In your project’s urls.py:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # your url patterns
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Step 3: Enable Uploads in Summernote Settings

Add this to settings.py:

X_FRAME_OPTIONS = 'SAMEORIGIN'  # Required for Summernote iframe

SUMMERNOTE_CONFIG = {
    'iframe': True,
    'summernote': {
        'width': '100%',
        'height': '480',
    },
    'attachment_require_authentication': False,
}

Now, when you upload images through Summernote, they will be saved in your media directory and served correctly during development.

Read To-Do List in Python Django

Tips from My Experience

• Always test Summernote functionality in different browsers to ensure consistent behavior.
• For production, configure your web server (e.g., Nginx or Apache) to serve media files securely.
• Customize Summernote toolbar options via SUMMERNOTE_CONFIG to tailor the editor to your app’s needs.
• If you want to restrict users from uploading certain file types, implement validation in your forms or models.
• Remember to save your Django project with migrations after adding any Summernote fields.

Adding Summernote to your Django project is straightforward and enhances your user interface with a professional rich text editor. Whether you use it in the admin or your forms, you gain powerful editing features with minimal setup.

If you’re building applications that require content creation or editing, Summernote is a fantastic choice that I recommend based on years of practical use.

You may also like to read:

• Use Summernote Editor in Django
• Create an Email Sender App in Django
• Get HTML Code from Rich Text in Python Django

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/