How to Use Summernote Editor in Django Python ?

Hi Dev,

This post is focused on how to use summernote editor in django python. this example will help you django summernote editor example tutorial. you can understand a concept of django summernote editor example app. I would like to share with you django summernote editor example tutorial for beginners. You just need to some step to done django summernote editor example tutorial.

So, we will go through the integration of the Summernote WYSIWYG HTML Editor in Django.

Sometimes you are create 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 i explained simply step by step example of how to use django summernote editor example.

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example

python3 manage.py startapp core

First of all we can install the django-summernote library. let us see how to use this library.

pip install django-summernote

In this step we require to do two things in our settings.py file, One is to change the path of template look up directory. Second one is to configure our media folder. Add the below lines to your settings.py file:

Add django_summernote to INSTALLED_APPS in settings.py.

Next, you need to add it in the settings.py file as follows:

....
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'core',
    'django_summernote',
]

....
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

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

SUMMERNOTE_THEME = 'bs4'    # Use Bootstrap4 theme
....

If you want to collect a static file then following below command.collect static files before publishing or development.

python manage.py collectstatic

Django 3.X users must add the below configuration

X_FRAME_OPTIONS = 'SAMEORIGIN'

In this step we will To represent our model in the admin interface, add this line in models.py add the following code:

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

After creating these model, you need to create migrations using the following command:

python manage.py makemigrations

After successfully run the above command go to the core/migrations/0001_initial.py

# Generated by Django 3.1.7 on 2022-07-14 12:22

from django.db import migrations, models


class Migration(migrations.Migration):

    initial = True

    dependencies = [
    ]

    operations = [
        migrations.CreateModel(
            name='Post',
            fields=[
                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('title', models.CharField(max_length=255)),
                ('content', models.TextField()),
            ],
        ),
    ]

Next, you need to migrate your database using the following command:

python manage.py migrate

In this step, we need to create the views for performing django admin panel.Open the core/views.py file and add:

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

# Register your models here.

class PostAdmin(SummernoteModelAdmin):
    summernote_fields = '__all__'


admin.site.register(Post, PostAdmin)

Next, Create a new file called forms.py in posts application, and add the following:

from django import forms
from django_summernote.widgets import SummernoteWidget


class PostForm(forms.ModelForm):
    content = forms.CharField(widget=SummernoteWidget())

    class Meta:
        model = Post
        fields = ('title', 'content')

We have to use the safe templatetag while displaying in templates.

{{ content|safe }}

In this section, we’ll create the urls to access our views.Go to the urls.py example/urls.py file and update it as follows:

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('summernote/', include('django_summernote.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python manage.py runserver

Next, go to the http://localhost:8000/admin address with a web browser.

I Hope It will help you....