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.

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:

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!


Arnab Kumar Shil

Love coding, traveling, anime, cycling, ping pong, motorbiking, and humor.

Dhaka, Bangladesh
https://ruddra.com

Comments

comments powered by Disqus