How To Integrate CKEditor with 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 CKEditor 5 for this tutorial.

Add an id to Admin Textarea

At first, we need to add id to the textarea in Django Admin so that we can find it through the id and bind it with CKEditor. For that, we will use formfield_overrides that provides a quick-and-dirty way to override some of the field options on Django admin.
# myproject/admin.py
class ProjectUpdateAdmin(admin.ModelAdmin):
formfield_overrides = {
models.TextField: {'widget': Textarea(
attrs={'id': 'project_update_textarea'})}
}
Here we have added an id project_update_textarea to every textfield in Django admin panel of the ProjectUpdate model.

Add the script to base.html

At first, make a directory named admin in your templates directory and copy the base.html file there. The admin base template can be found in this path: django/contrib/admin/templates/admin/base.html. After that, add these lines before the body closing tag:

# templates/admin/base.httemplates/admin/base.httemplates/admin/base.html
<!-- Start custom scripts for customizing admin form -->
<script src="{% static 'vendor/ckeditor5/ckeditor.js' %}"></script>
<script>
ClassicEditor
.create( document.querySelector( '#project_update_textarea' ) )
.catch( error => {
console.error( error );
} );
</script>
<!-- End custom scripts for customizing admin form -->

I have downloaded the CKEditor package and stored in static/vendor/ckeditor5 directory. Hence, I have used the static tag in the script. You can use the CDN link also if you prefer.

Conclusion

That’s it. Go to your Django Admin Panel. The CKEditor should work now.