RichText Editor in Django Admin Site
Apr 29, 2014 · 1 Min Read · 2 Likes · 0 Comment![RichText Editor in Django Admin Site](/content/images/2020/04/rich_huedd4a8cf7a78a9fd2fa3d869bbf8252f_843922_220x0_resize_q75_lanczos.jpg 220w,/content/images/2020/04/rich_huedd4a8cf7a78a9fd2fa3d869bbf8252f_843922_440x0_resize_q75_lanczos.jpg 440w,/content/images/2020/04/rich_huedd4a8cf7a78a9fd2fa3d869bbf8252f_843922_500x0_resize_q75_lanczos.jpg 500w,/content/images/2020/04/rich_huedd4a8cf7a78a9fd2fa3d869bbf8252f_843922_600x0_resize_q75_lanczos.jpg 600w,/content/images/2020/04/rich_huedd4a8cf7a78a9fd2fa3d869bbf8252f_843922_640x0_resize_q75_lanczos.jpg 640w,,/content/images/2020/04/rich_huedd4a8cf7a78a9fd2fa3d869bbf8252f_843922_720x0_resize_q75_lanczos.jpg 720w,,/content/images/2020/04/rich_huedd4a8cf7a78a9fd2fa3d869bbf8252f_843922_1024x0_resize_q75_lanczos.jpg 640w)
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: Jul 13, 2024
I won't spam you. Unsubscribe at any time.