Open In App
Related Articles

Adding WYSIWYG editor to Django Project

Like Article
Save Article
Report issue

Often, to manage content efficiently we use WYSIWYG (What You See Is What You Get) editor which stores our content in html and is also helpful to upload images, creating links, lists and works almost like WordPress editor. This article is in continuation of Blog CMS Project in Django. Check this out here – Building Blog CMS (Content Management System) with Django

How to add WYSIWYG (What You See Is What You Get)  editor to Django Project?

1. Install summernote – 

# installing wysiwyg editor
pip3 install django-summernote

2. Add the editor to installed apps in the settings file


    # adding in installed apps


3. Migrate the project

# migrate django summernote
python3 migrate

4.Customize admin interface – 

Now we will customize the admin interface for the app. For that open the file and add the below code


# importing admin and posts model
from django.contrib import admin
from .models import posts
from django_summernote.admin import SummernoteModelAdmin
# creating admin class
class blogadmin(SummernoteModelAdmin):
    # displaying posts with title slug and created time
    list_display = ('title', 'slug', 'status', 'created_on')
    list_filter = ("status", )
    search_fields = ['title', 'content']
    # prepopulating slug from title
    prepopulated_fields = {'slug': ('title', )}
    summernote_fields = ('content', )
# registering admin class, blogadmin)


5. Adding media setting for our editor

Open your python settings file and add these lines


# add it in
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
# allows to load iframe from same hostname


The editor works well in production but for the development server it won’t work because of the way the static files load so to make that work we need to add a condition in django projects


# add condition in django urls file
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)


6. Customizing Admin Page – 

Django also gives the option to customize Admin page, we will do an minimal customization of changing the name from django default to GeeksForGeeks. go to file in django project and add these lines


# customizing admin interface = 'GeeksForGeeks' = 'GeeksForGeeks' = 'GeeksForGeeks Administration'
urlpatterns = [
 # urls handling WYSIWYG editor
    path('editor/', include('django_summernote.urls')),


Now run the server and login into admin panel using the superuser credentials. You will see something like in the below picture. So we have created and customized admin class for creating, managing and listing posts for our CMS with custom admin login.

7. Output Screenshots – 

Custom Admin Login

listing posts

editor for posts

Last Updated : 01 Nov, 2020
Like Article
Save Article
Share your thoughts in the comments
Similar Reads