Hey I will be showing you how you can implement CKEditor to your Django project in less than 5mins.

So recently i had need to implement a rich text editor in the admin panel of a project i was working on for a client as the default editor that comes with django wasn’t sufficient for my clients.

Default django admin TextField

After tangling with few text editors, i decided to use CKEditor for the project and after the implementation, it was really perfect for my clients need.

After the integration and seeing the amount of time it took me to sort out the details i need for the integration from the official web page and github repo, i decided to write this post which is aimed at getting up and running with the implementation of this text editor in less than 5mins.

Now let's get down to business;

Open your django projects and install the ckeditor using

pip install django-ckeditor

This will install CKeditor in your project. Remember to activate your virtual environment if you don't want it to be installed globally on your local machine.

Add 'ckeditor' and 'ckeditor_uploader' to your INSTALLED_APPS setting.

Run python manage.py collectstatic

This will copy all the necessary statics files to your static root. Ensure your static files are serving currently

Add the following in your settings.py;

CKEDITOR_UPLOAD_PATH = "uploads"

CKEDITOR_IMAGE_BACKEND = "pillow"

CKEDITOR_THUMBNAIL_SIZE = (300, 300)

CKEDITOR_IMAGE_QUALITY = 40

CKEDITOR_BROWSE_SHOW_DIRS = True

CKEDITOR_ALLOW_NONIMAGE_FILES = True

CKEDITOR_FORCE_JPEG_COMPRESSION = True

Please refer to django-ckeditor for detailed explanation of what each of the above line of code does.

Go to your main project URLs and add the following;

path('ckeditor/', include('ckeditor_uploader.urls')),

Navigate to the models.py of any of the application you have and add the following;

from ckeditor_uploader.fields import RichTextUploadingField

Replace the models.TextField() with RichTextUploadingField()

This will replace the default Textfield that django comes with, with the ckeditor of your application

Locate the template serving the particular views you want to display to your users and add the safe keyword.

{{ post.description|safe}}

if you don’t add the safe in the template serving a particular view, the html attributes will be rendered raw when people visit that particular page.

finally run

python manage.py makemigrations

python manage.py migrate

this will make the necessary migrations to the database and then you can run python

python manage.py runserver

Log into your admin panel and enjoy your sweet rich awesome CKEditor.

A fullstack software developer constantly building shit tone of things with python and javascript and occasionally do some writing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store