Integrating Summernote WYSIWYG Editor in Django 

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 settings.py.

INSTALLED_APPS += ('django_summernote', ) 

Add django_summernote.urls to urls.py.

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 url.py.

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

X_FRAME_OPTIONS = 'SAMEORIGIN'

Save the settings file and run migrations.

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

from django_summernote.admin import SummernoteModelAdmin
from .models import Post

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

admin.site.register(Post, 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, https://github.com/summernote/django-summernote

Related Articles

19 Comments

  1. for me the issue was because in my virtualenv i had to pip install django-summernote and then python manage.py migrate, then python manage.py runserver and it worked.

    But first before doing the above you should pip install django-summernote, then add ‘django_summernote’, to your Installed Apps section and follow the directions in the article.

    Its easier if you have all this in your virtual environment.

  2. Hi!
    Thenks for all the knowledge you are sharing here!

    I have a problem after this section.. If I format tekst with hight or color.. It comes out like this in the preview
     Mihion.dk<span style="color: rgb(0, 255, 0);

    How can I just remove the "code view" from preview?

  3. Hello

    It works and thank you for the instructions but I cannot understand the below
    In order to make the development server i.e. DEBUG=True serve the media files add the following configuration to url.py. …

    Where is this url.py do you mean urls.py from the app? or do you mean to create a new file called url.py?
    Thank you

      1. thanks alot for ur tutoials they are informative and pratical
        i also think you should improve a little on ur explanation of were to put what exactly cos of beginers that might be starting off. i think ur tutorial deserve 5*. thanks

  4. HI,
    I’m getting the HTML Format from {{post.content |slice:”:200″ }} instead of plain Text,
    How can I turned it into a plain text ? Thanks

  5. Hi,
    I am new to django, and I try to extend previous your Blog app with this tutorial. I get summernote in admin interface and post is perfect rendered in my browser. But I have problem with template of index.html. On the box are displayed html tag…. Can you give me some idea of mistake ?

  6. Hello, thanks for this article, After following the instructions and I tried to run my migrations again here’s the exception that I got:
    “django.core.exceptions.AppRegistryNotReady: Models aren’t loaded yet.”
    Please is there anything I’m doing wrong? Thanks

  7. Hello, thanks a lot for your well explained tutorial !
    I have an issue about create a customized button. I use the this to link my own css an js files (in setting.py) :
    ‘css’: ( ‘/static/css/summernote.css’),
    ‘js’: (‘/static/js/components/summernote.js’),
    This work well for the css file, but elements in the js file is not taken into account.
    Do you have an idea about the problem?

  8. Finally the issue is something else, the javascript file is well included. But my code to add a button is not working.
    Kind regards

  9. Everything work fine on development (using python manage.py), but when i deploy it with nginx/uwsgi ….internal server error

    please help

Leave a Reply

Your email address will not be published. Required fields are marked *

Close