Django/Summernote/

How to integrate Summernote into the Django rest framework?

Published on

Summernote is a simple WYSIWYG editor. In this post, we will go through the integration of the Summernote WYSIWYG HTML Editor in Django.

Introduction :

Summernote:

The Summernote Editor is a free and open-source super simple WYSIWYG editor based on Bootstrap & jQuery. It is a JavaScript library that can be useful to build the WYSIWYG editors online. It is maintained under an MIT license by a large community. It is easy to use & contains many customizable options. It can easily be implemented in any framework like React, Django, Angular, etc.

Django:

Django is a high-level Python web framework that enables the rapid development of secure and maintainable websites. Built by experienced developers, Django takes care of the hassle of web development, so you can focus on writing your app without reinventing the wheel. It is free and open source, has a thriving and active community, great documentation, and many options for free and paid-for support. To learn more about relative links click here

But why would you need a Summernote WYSIWYG editor?

Suppose you are developing a blog application, in that writing every page directly using HTML, CSS and Javascript is a time-consuming activity and it will be difficult to manage the code if you have more pages. Therefore WYSIWYG editor is widely used to generate HTML pages dynamically and store them in the database. Once the content is stored in the Database you can easily read content using APIs and present it to the users.

In this blog, we will go through the integration of the Summernote in Django.

Flow Diagram:

Steps:

Step 1: Install Python.

Python 3.6 or above is needed to create a Django project, therefore please install python and proceed to the next step.

Step 2: Install Django.

Install the Django framework using the following command.

1pip install django

Step 3: Create a Django Project.

Create a Django project using the below command.

1django-admin startproject <your_project_name>
2
3For example:
4django-admin startproject summernote

Step 4: Create a Django App:

After creating the Django project, then make the Django app

1python manage.py startapp <your_app_name>
2
3For example:
4django-admin startproject posts

A sample screenshot of Django project files is shown below.

Screenshot1

Step 5: Install django-summernote.

After creating the Django app then install the django-summernote using the following command.

1pip install django-summernote

Step 6: Configure the django-summernote.

In the Django project settings.py file (i.e summernote/settings.py) add the following piece of code:

1INSTALLED_APPS = [
2    'django.contrib.admin',
3    'django.contrib.auth',
4    'django.contrib.contenttypes',
5    'django.contrib.sessions',
6    'django.contrib.messages',
7    'django.contrib.staticfiles',
8    "posts",                   # Add your app Name
9    "django_summernote",       # Install django_summernote
10]
11
12
13TEMPLATES = [
14    {
15        'BACKEND': 'django.template.backends.django.DjangoTemplates',
16        'DIRS': [BASE_DIR / "Templates"], # Add the template folder
17        'APP_DIRS': True,
18        'OPTIONS': {
19            'context_processors': [
20                'django.template.context_processors.debug',
21                'django.template.context_processors.request',
22                'django.contrib.auth.context_processors.auth',
23                'django.contrib.messages.context_processors.messages',
24            ],
25        },
26    },
27]
28
29STATIC_URL = '/static/'
30STATICFIELS_DIRS = [BASE_DIR / "static"]
31
32X_FRAME_OPTIONS = 'SAMEORIGIN''
33

A Sample code for the /summernote/settings.py can be found in the following GitHub URL.

django_summernote_integration/settings.py at master · episyche/django_summernote_integration

In the Django app views.py file (i.e posts/views.py), add the following piece of code:

1from django.shortcuts import render
2from .models import*
3# Create your views here.
4
5def view_summernote(request):
6    post_data = Post.objects.all().order_by('-id').first()
7    context = {"form": post_data}
8    return render(request, "index.html", context)

A Sample code for the posts/views.py can be found in the following GitHub URL.

django_summernote_integration/views.py at master · episyche/django_summernote_integration

In Django Project urls.py file (i.e summernote/urls.py), add the following piece of code:

1from django.contrib import admin
2from django.urls import path, include
3from django.conf import settings
4from django.conf.urls.static import static
5from posts.views import*
6
7urlpatterns = [
8    path('admin/', admin.site.urls),
9    path('summernote/', include('django_summernote.urls')),
10    path("view", view_summernote)
11
12]
13if settings.DEBUG:
14    urlpatterns += static(settings.MEDIA_URL,
15                          document_root=settings.MEDIA_ROOT)

A Sample code for the /summernote/urls.py can be found in the following Github URL.

django_summernote_integration/urls.py at master · episyche/django_summernote_integration

In posts/models.py, add the following piece of code:
1from django.db import models 2 3 4class Post(models.Model): 5 title = models.CharField(max_length=255) 6 content = models.TextField() 7 8 def __str__(self): 9 return self.title

A Sample code for the posts/models.py can be found in the following Github URL.

django_summernote_integration/models.py at master · episyche/django_summernote_integration

In Posts/admin.py, add the following piece of code.

1from django.contrib import admin
2from django_summernote.admin import SummernoteModelAdmin
3
4from .models import Post
5
6class PostAdmin(SummernoteModelAdmin):
7    summernote_fields = ('content', )
8    
9admin.site.register(Post, PostAdmin)

A Sample code for the posts/admin.py can be found in the following GitHub URL.

django_summernote_integration/admin.py at master · episyche/django_summernote_integration

In your project, go to your /templates directory and create a file called index.html

In Templates/index.html, add the following piece of code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Django SummerNote</title>
9</head>
10
11<body>
12    <div>
13        <div style="width:1100px; margin-left:auto;margin-right:auto; height: 30px; font-size:24px;text-align: center;">
14            {{form.title|safe}}</div>
15        <div>{{form.content|safe}}</div>
16    </div>
17</body>
18
19</html>

A Sample code for the Templates/index.html can be found in the following GitHub URL.

django_summernote_integration/index.html at master · episyche/django_summernote_integration

After finishing all the above steps mentioned, please go ahead and create a superuser by writing the following command:

1python3 manage.py createsuperuser

We then write the following credentials step by step. We can fill in these credentials according to our preferences:

Username: admin
Email address: admin@gmail.com
Password: ********
Password (again): ********

Note: After filling in a row, press “Enter” to fill in the other information.

Now the superuser will be created if we have entered all fields correctly.

Screenshot3

Finally, Run the Django application using the following command.

1 python3 manage.py runserver

A Sample GitHub repo, with all the required configurations, is given below.

GitHub - episyche/django_summernote_integration

Result:

After finishing all the steps mentioned above, please go to the web browser, and try to access the Django application (i.e http://127.0.0.1:8000/admin). An example output screenshot is given below.

Results