Django How to Integrate Summernote WYSIWYG Editor

Django How to Integrate Summernote WYSIWYG Editor

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”.

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

Install django-summernote.

pip install django-summernote

django_summernote to INSTALLED_APP in settings.py.

INSTALLED_APPS += ('django_summernote', ) 

django_summernote.urls to urls.py.

from django.conf import settings
from django.conf.urls.static import static
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)

Media settings
X_FRAME_OPTIONS = 'SAMEORIGIN'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')


To explore more configuration read the official documentation of the package, https://github.com/summernote/django-summernote

#admin.py
from django.contrib import admin

from myapp.models import Post 
from django_summernote.admin import SummernoteModelAdmin

#admin.site.register(Post)

class PostAdmin(SummernoteModelAdmin):
    list_display = ('title', 'slug', 'status','created_on')
    list_filter = ("status",)
    search_fields = ['title', 'content']
    prepopulated_fields = {'slug': ('title',)}
    summernote_fields = ('content',)
 
admin.site.register(Post, PostAdmin)

#urls.py
from django.contrib import admin  
from django.urls import path, include
from myapp import views  

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [  
    path('admin/', admin.site.urls),  
    path('',views.index),
 path('/', views.PostDetail.as_view(), name='post_detail'),
    path('summernote/', include('django_summernote.urls')),
]

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

#settings.py
INSTALLED_APPS += ('django_summernote', )

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