RichText Editor in Django Admin Site

I wanted to add a rich text editor within django administrator. It is not that hard to add a rich text editor, as there are editors like CKeditor, Tinymce.

Download ckeditor file

There are multiple plugins for django like django-ckeditor or django-tinymce etc. It seemed very complicated to use for me. So what I did here is that I have downloaded ckeditor standard edition and extracted it in my Static folder and loaded the js file within templates>admin>base.html.

Now, using firebug, I retrieved the textarea name/id/class in which I wanted to add ckeditor using firebug (or from chrome/firefox: inspect elements). This process is simple, just load the page where your textarea(or any type of field) resides, open firebug and inspect that place.For example: lets say the model field I want to modify is named blogbody. So the element’s name in admin site was id_blogbody(auto generated). In case of using a form, the input will be like following:

Writing forms.py

blogbody= forms.CharField(
    widget=forms.TextInput(attrs={'id': 'id_blogbody'})
 )

Generated text

<input id="id_blogbody" ... />

Then go to base.html and add this script:

<script>
  CKEDITOR.replace("name_or_id_or_class_of_the_textfield");
  //in this example CKEDITOR.replace( '#id_blogbody' )
</script>

Now reload the page from admin site and a textfield with rich text editor will be generated!

Last updated: Apr 05, 2024