Creating rich text content easily and efficiently is a common requirement. One of the most popular tools for this purpose is Summernote, a simple and flexible WYSIWYG (What You See Is What You Get) editor. When combined with Django, a high-level Python web framework, Summernote can significantly enhance the user experience by providing an intuitive interface for text editing. In this blog, we’ll explore how to integrate Summernote with Django step by step.

Why Use Summernote?

Before diving into the integration process, let’s highlight some reasons why Summernote is a great choice:

1. User-Friendly Interface: Summernote offers a clean and simple interface that allows users to edit text easily.
2. FTeature-Rich: It includes various formatting options like bold, italics, lists, links, images, and more.
3. Responsive Design: Summernote is mobile-friendly, ensuring a consistent editing experience across devices.
4. Extensible: It supports plugins for additional functionality.

Summernote can be used by installing ‘django-summernote’ or by using a CDN.

Method 1. Installing Django Summernote

The next step is to install Django Summernote. This can be done via pip as well:

pip install django-summernote

After installation, add django_summernote to your INSTALLED_APPS in settings.py if you haven’t already:

INSTALLED_APPS = [
   ...
   'django_summernote',
]

Configuring Django Summernote

You need to include Summernote’s URLs in your project’s urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
   path('admin/', admin.site.urls),
   path('summernote/', include('django_summernote.urls')),
   path('', include('myapp.urls')),  # Adjust this to your app's URL configuration
]

Creating a Model

Now, let’s create a model in myapp/models.py to use the Summernote editor. For instance, if you have a blog application, your model might look like this:

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

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

   def __str__(self):
       return self.title

Creating a ModelForm

To handle the Post model, you need to create a form. In myapp/forms.py, define the form like this:

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

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

Creating Views

Next, set up your views and templates to create and display posts. In myapp/views.py, you might have something like:

from django.shortcuts import render, redirect
from .forms import PostForm
from .models import Post

def create_post(request):
   if request.method == "POST":
       form = PostForm(request.POST)
       if form.is_valid():
           form.save()
           return redirect('post_list')  # Adjust this to your post list view
   else:
       form = PostForm()
   return render(request, 'create_post.html', {'form': form})

def post_list(request):
   posts = Post.objects.all()
   return render(request, 'post_list.html', {'posts': posts})

Creating Template

In myapp/templates, create create_post.html and post_list.html.

create_post.html:

   
   
   
   {{ form.media }}


   
Create Post
   

       {% csrf_token %}
       {{ form.as_p }}
       Save
   

post_list.html:

   
   
   


   
Post List
   

       {% for post in posts %}
           
{{ post.title }}
       {% endfor %}
   

Method 2. Using Summernote through CDN

Using Summernote directly through static files can give you more control over the integration and customization process. Here’s a detailed guide on how to integrate Summernote with Django by including Summernote through static files.

Setting Up Static Files

Ensure your settings.py is configured to handle static files. Add or update the following settings:

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Download Summernote

Download the Summernote library from the official website. Extract the files and place the summernote-lite.min.js and summernote-lite.min.css in your static directory. Your directory structure should look like this.

myproject/
    static/
        build/
            js/
                summernote-lite.min.js
            css/
                summernote-lite.min.css
    myproject/
    myapp/

Create a Django Model

Define a model to use the Summernote editor. In myapp/models.py, you might have:

from django.db import models

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

   def __str__(self):
       return self.title

Create a Django ModelCreate and Apply Migrations

Execute the following commands to create and apply migrations:

python manage.py makemigrations
python manage.py migrate

Create a ModelForm

Run the following commands to create and apply migrations:

from django import forms
from .models import Post

class PostForm(forms.ModelForm):
   class Meta:
       model = Post
       fields = ['title', 'content']

Create Views and Templates

Set up your views and templates. In myapp/views.py, create views to handle post creation and listing. You can create the exact views and URLs as we did in Method 1.

In myapp/templates, create create_post.html and post_list.html.

create_post.html:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Create Post</title>
   <link href="{% static 'build/css/summernote-lite.min.css' %}" rel="stylesheet">
</head>
<body>
   <h1>Create Post</h1>
   <form method="post">
       {% csrf_token %}
       {{ form.as_p }}
       <button type="submit">Save</button>
   </form>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="{% static 'build/js/summernote-lite.min.js' %}"></script>
   <script>
       $(document).ready(function() {
           $('textarea').summernote({
               height: 200
           });
       });
   </script>
</body>
</html>

Post_list.html:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Post List</title>
</head>
<body>
   <h1>Post List</h1>
   <ul>
       {% for post in posts %}
           <li>{{ post.title }}</li>
       {% endfor %}
   </ul>
</body>
</html>

Conclusion

Integrating Summernote with Django provides a powerful and user-friendly way to handle rich text content in your applications. With its easy setup and extensive features, Summernote enhances the content creation experience for both developers and users. Following the steps outlined in this guide, you can seamlessly integrate Summernote into your Django project and take your web application’s text editing capabilities to the next level.