Replace textarea with rich text editor in Django Admin?

Viewed 44092

I would like to know the best way to replace a standard textarea field with a rich text editor in Django Admin?

8 Answers

There's an add-on Django application to provide TinyMCE support for Django admin forms without having to muck around with admin templates or Django newform internals.

Take a look on this snippet - basic idea is to include custom JS in your admin definitions which will replace standard text areas with rich-text editor.

For jQuery/FCKEditor such JS could look like that:

$(document).ready(function() {
    $("textarea").each(function(n, obj) {
        fck = new FCKeditor(obj.id) ;
            fck.BasePath = "/admin-media/fckeditor/" ;
            fck.ReplaceTextarea() ;
    });
});

I'd say: define your own ModelAdmin class and overwrite the widget used for particular field, like:

class ArticleAdminModelForm(forms.ModelForm):
    description = forms.CharField(widget=widgets.AdminWYMEditor)

    class Meta:
        model = models.Article

(AdminWYMEditor is a forms.Textarea subclass that adds WYMEditor with configuration specific to Django admin app).

See this blog post by Jannis Leidel to see how this widget can be implemented.

Install this package

pip install django-ckeditor

then run these commands to migrate.

python manage.py makemigrations
python manage.py migrate
python manage.py collectstatic

finally restart your Django server.

Once you complete the above steps, you can see the rich text editor in your admin panel fields.

Related