How to add Summernote WYSIWYG Editor in Django

After I created a blog application, biggest hurdle from using it is its admin editor. Anyone who has every used wordpress or any otehr blogging platform will not be OK to use simple text editor. I was searching for options to make the text field something like wordpress. I came across two options tinymce editor and Summernote.

I looked at install steps of tinymce and it looked complicated, I did not try and see if this works. When I looked at Summernote, it look simple and straghtforward and I decided to give it a try. Its very simple and it works perfectly fine.

Here are the steps for installtion

Step#1 Install Summernote package.

Install it just like any other python package. If you are using virtualenv, please make sure you install it in virtualenv

$pip install django-summernote
python -m pip install Pillow

Step#2 Changes in

Add this to main file

urlpatterns = [
    path('summernote/', include('django_summernote.urls')),
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  #add this for media

Step#3 Changes in

Add django_summernote in installed apps in file.

    'blog.apps.BlogConfig', # add this statement
    'ifsccode.apps.IfsccodeConfig', # add this statement
    # 'django.contrib.sites',
    'django_summernote',          # This is added


Also add media folder settings at the end of

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


Step#4 Changes in

Changes in

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

from .models import Post, Category, Comment, Tag


class PostAdmin(SummernoteModelAdmin):    #added this
    summernote_fields = ('content',)      #added this, PostAdmin)

Please note that in above table, I have content field under Post

Step#5 Changes in Templates

Finally and most importantly, when you are displaying the field, mark it as safe.

<div id="postdetails">{{post.content|safe}}</div>

once this is done

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.