How to use Django Ckeditor to upload the RichText field in Django Admin

Sometimes we have to add WYSIWYG editor to an input box in the Django Admin. It is a simple and easy task but may seem tricky for newbies. So, we are going to add a WYSIWYG (which s an acronym for “What You See Is What You Get”) editor to our Django Admin.

For this tutorial, I am assuming that we have a ProjectUpdate model where we need to integrate a WYSIWYG editor. I am using Django Ckeditor for this tutorial.

Installation

pip install django-ckeditor

Add the ckeditor to your and CKEDITOR_UPLOAD_PATH = "uploads/" in INSTALLED_APPS :

INSTALLED_APPS = [
    'blogs.apps.BlogsConfig',
    # 'polls.apps.PollsConfig',
    'users.apps.UsersConfig',
    'crispy_forms',
    'rolepermissions',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'ckeditor',
	]

# Added the CKEDITOR Upload Path

CKEDITOR_UPLOAD_PATH = "uploads/"

Migrate

Then migrate the database

python manage.py migrate

Change the Models field in models.py

from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    
    title = models.CharField(max_length=2000)
    content = RichTextUploadingField()
    date_posted = models.DateTimeField(null=True,blank=True)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    slug =models.SlugField(max_length=2000,null=True,blank=True)
  

Makemigrations & Migrate on new changes

python manage.py makemigrations

python manage.py migrate

Add ckeditor.urls in urls.py

from django.contrib import admin
from django.urls import path, include, re_path
from users import views as user_views



#..Adding for media directory
from django.conf import settings


urlpatterns = [

    path('',include('blogs.urls')),
    path('accounts/', include('allauth.urls')),
    path('ckeditor/', include('ckeditor_uploader.urls')),
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Now, run the server using below command,

python manage.py runserver

Then, Navigate to http://127.0.0.1:8000/admin admin URL, you should able to see something like below ,

Happy Coding !!!