Table of Contents

1. Introduction

2. Why would you need a WYSIWYG editor?

3. Step 1: Create Virtual Environment

4. Step 2: Create Project

5. Step 3: Create Application

6. Step 4: Create Model

7. Step 5: Update settings.py file

8. Step 6: Create urls.py

9. Step 7: Write Function

10. Step 8: Create forms.py file

11. Step 9: Create Template

12. Step 10: Run Server

 

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.

However, I recently discovered Summernote, a really simple yet flexible text editor.

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

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.

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

First, create folder Summernote and enter them into the folder

$ mkdir Summernote && cd Summernote

Step 1: Create Virtual Environment

Create Virtual Environment  for our project

$ virtualenv ENV

Then activate that environment using the following command

$ source ENV/bin/activate

Step 2: Create Project

The next step is to create a project

$ django-admin.py startproject config

$ cd config

Install Django

Install Django and summernote in our project environment

$ pip install django

$ pip install django-summernote

Step 3: Create Application

Create posts application in config project

$ python manage.py startapp posts

open code in visual studio code editor

$ code .

Open the models.py in the posts application and add the following code to it.

from django.db import models # Create your models here. class Post(models.Model):         title = models.CharField(max_length=255)         content = models.TextField()         def __str__(self):                 return self.title

 

Step 4: Create Model

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

from django.contrib import admin from django_summernote.admin import SummernoteModelAdmin from .models import Post   # Register your models here. class PostAdmin(SummernoteModelAdmin):     summernote_fields = ('content', ) admin.site.register(Post, PostAdmin)

 

Step 5: Update settings.py file

Open settings.py and make the following changes:

INSTALLED_APPS = [                 'django_summernote',                 'posts', ] MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR, 'media/' X_FRAME_OPTIONS = 'SAMEORIGIN' SUMMERNOTE_THEME = 'bs4' # Use Bootstrap4 theme

 

Step 6: Create Superuser

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

$ python manage.py createsuperuser

 

 

Step 7: Create urls.py

Open urls.py in config application, and make the following changes:

from django.urls import path, include urlspatterns = [         path('summernote/', include('django_summernote.urls')),         path('', include('posts.urls')), ]

 

 

Step 8: Write Function

Write a function for creating a post form

from django.shortcuts import render from .forms import PostForm   def form(request):         # create object of form         form = PostForm(request.POST or None, request.FILES or None)         # check if form data is valid         if form.is_valid():         # save the form data to model                 form.save()         context = {         "form":form,         }         return render(request, "home.html", context)

 

 

Step 8: Create forms.py file

from django import forms from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget from .models import * from django.forms import ModelForm   class PostForm(forms.ModelForm):         content = forms.CharField(widget=SummernoteWidget())           class Meta:                 model = Post                 fields = ('title', 'content')                 widgets = {                 'content': SummernoteWidget(),                 }

 

Step 9: Create Template

create a template home.html under the template folder and add following code in it.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Summernote</title> </head> <body>     <form method="POST" action="" autocomplete="off">         {% csrf_token %}         Title: {{ form.title|safe }}<br><br>         Content:{{ form.content|safe }}         <button type="submit" class="btn btn-success">Submit</button>     </form> </body> </html>

 

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

create urls.py file in posts application and add the following urlpattern

from django.contrib import admin from django.urls import path, include from .import views   urlpatterns = [         path('form/', views.form, name='form'), ]

 

Now create a migrations file for this change and add it to our database via the migrate command.

$ python manage.py makemigrations

$ python manage.py migrate

Step 10: Start Server

start server using the following command and check output

$ python manage.py runserver