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