Support Our Site

To ensure we can continue delivering content and maintaining a free platform for all users, we kindly request that you disable your adblocker. Your contribution greatly supports our site's growth and development.

Integrating Summernote WYSIWYG Editor in Django

3 min read

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.

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

But 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.

Also even if you are not making a blog application, any kind of application needs about us, terms and conditions kind of pages, writing them on WYSIWYG is comparatively faster.

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

summernote editor in django

Integrating Summernote In Django

Considering the scope of the article I am assuming you already have a basic Django project up and running if not reading the following articles is recommended.

In this tutorial, I am implementing the editor in a blog application and this is the post model of the app.

class Post(models.Model):
    title = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(max_length=200, unique=True)
    author = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name='blog_posts')
    updated_on = models.DateTimeField(auto_now=True)
    content = models.TextField()
    created_on = models.DateTimeField(auto_now_add=True)
    status = models.IntegerField(choices=STATUS, default=0)
    class Meta:
        ordering = ['-created_on']

    def __str__(self):
        return self.title

Next Install django-summernote.

pip install django-summernote

Add django_summernote to INSTALLED_APP in

INSTALLED_APPS += ('django_summernote', ) 

Add django_summernote.urls to

from django.urls import include

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

Django-summernote allows you to upload media files, therefore make sure media URLs are configured.

An example of media settings could be as follows,

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

In order to make the development server i.e. DEBUG=True serve the media files add the following configuration to

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

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

Django 3.X users must add the below configuration


Save the settings file and run migrations.

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

from django_summernote.admin import SummernoteModelAdmin
from .models import Post

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

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

summernote editor in django

Similarly, the editor can be applied to forms.

from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget

# Apply summernote to specific fields.
class SomeForm(forms.Form):
    foo = forms.CharField(widget=SummernoteWidget())  # instead of forms.Textarea

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

{{ content | safe }}

To explore more configuration read the official documentation of the package,


Latest Articles

Latest from djangocentral

How to Use Subquery() in Django With Practical Examples

In the realm of web development, Django stands as a powerful and versatile framework for building robust applications. One of the key aspects of developing efficient and optimized web applications is handling database queries effectively. In this article…
Read more →

4 min read

DRF Serializer: Handling OrderedDict and Converting It to a Dictionary or JSON

In Django Rest Framework (DRF) tests, when you access, you might encounter an OrderedDict instead of a regular dictionary. This behavior is intentional and reflects the design of DRF's serialization process.Understanding the Problem The u…
Read more →

3 min read

Django Rest Framework CheetSheet: Mastering API Development

Django Rest Framework (DRF) is a powerful toolkit that makes building robust and scalable web APIs with Django a breeze. Whether you're a seasoned Django developer or a newcomer, having a comprehensive cheat sheet at your disposal can be a game-changer. …
Read more →

5 min read

How to Perform NOT Queries in Django ORM

In Django, performing NOT queries allows you to exclude certain records from the query results based on specific conditions. The NOT operator, represented by the tilde (~) when used in conjunction with the Django ORM's Q object, helps you construct compl…
Read more →

3 min read